Solved

Dynamically Create a select element with options using jquery

Posted on 2012-03-28
2
496 Views
Last Modified: 2012-04-05
Hi,

I want to create a select with multiple options using jquery.

<table id="tblForm"></table>

I want to append dropdown list to this table.

Here is my select list which I want to build dynamically using jquery.

<Select id="dynSelect">
 <option value="choice1">Choice1</option>
<option value="choice2">Choice2</option>
<option value="choice3">Choice3</option>
<option value="choice4">Choice4</option>
<option value="choice5">Choice5</option>
</Select>

Thanks for the help.
0
Comment
Question by:r_pat72
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
2 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 37779850
For example : http://jsfiddle.net/6VZG9/1/
    $(document).ready(function() {
    
    var mySelectString = '<Select id="dynSelect"><option value="choice1">Choice1</option><option value="choice2">Choice2</option><option value="choice3">Choice3</option><option value="choice4">Choice4</option><option value="choice5">Choice5</option></Select>';

    $("#tblForm").html(mySelectString);
     
    })

Open in new window

¿
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 37779860
another one : http://jsfiddle.net/6VZG9/3/

    $(document).ready(function() {
    
        var mySelectString = '<Select id="dynSelect"></Select>';
    
        $("#tblForm").html(mySelectString);
        var j = [["choice1","Choice1"],["choice1","Choice1"],["choice1","Choice1"],["choice1","Choice1"],["choice1","Choice1"]];
        $.each(j, function(i,v) {
            $("#tblForm select").append("<option value='" + v[0] + "'>" + v[1] + "</option>");
        })
     
    })

Open in new window

¿
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question