JQuery: Dynamically create select Tag

Question

I am using JQuery to dynamically (based on user choice) create tag. User enters require options in a text box and my code creates select tag of it. Script is:

var numbersString = "1,2,3,4,5,6";
var data = numbersString.split(',');

var s = $("<select id=\"selectId\" name=\"selectName\" />");
for(var val in data) {
    $("<option />", {value: val, text: data[val]}).appendTo(s);
}
s.appendTo("#msj_form");

where msj_form is my div id where the tag appends. Right now it creates:

<select id="selectId" anme="selectName">
    <option value="0">1</option>
    <option value="1">2</option>
    <option value="2">3</option>
    <option value="3">4</option>
    <option value="4">5</option>
    <option value="5">6</option>
</select>

But I also want to concatinate a Label and <tr><td> code along with tag such that the code will look like:

<tr>
    <td>My Label</td>
    <td>
        <select id="selectId" anme="selectName">
            <option value="0">1</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
            <option value="5">6</option>
        </select>
    </td>
</tr>

enter image description here

give an id to the td tag where you need to add this select tag and append to that div. — Philemon philip Kunjumon
– Philemon philip Kunjumon, Commented May 14, 2012 at 6:59
I did jQuery("#msj_form").append(appendLabel+"<td>"+myelement+"</td></tr>"); for other tags and it works fine, but it does not work for select tag. @PhilemonphilipKunjumon: actually I am creating a script by which user could create a HTML Form with his/her required fields therefore I can not hard code any td/tr tags — PHP Ferrari
– PHP Ferrari, Commented May 14, 2012 at 7:03
you can do it like this ..var final='<tr><td> my label here</td><td>'+s+'</td><tr>' , then you can append to table id $('#tableid').append(final); — Tamkeen
– Tamkeen, Commented May 14, 2012 at 7:05
@Tamkeen: I tried: var final="<tr><td> my label here</td><td>"+s+"</td><tr>";$("#msj_form").appendTo(final); but nothing displayed but when I tried: jQuery("#msj_form").append(final); browser shows: my label here [object Object] — PHP Ferrari
– PHP Ferrari, Commented May 14, 2012 at 7:10

Ravi Gadag · Accepted Answer · 2012-05-14 07:23:34Z

53

var s = $("<select id=\"selectId\" name=\"selectName\" />");
for(var val in data) {
    $("<option />", {value: val, text: data[val]}).appendTo(s);
}

after the for loop, wrap all the content with TableRow and Cells like this , Jquery Wrap()

$(s).wrap('<table><tr><td></td></tr></table>');

answered May 14, 2012 at 7:23

Ravi Gadag

15.9k5 gold badges60 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shawn Wernig Over a year ago

Nice and clean, deserves an up

PHP Ferrari · Accepted Answer · 2012-05-14 08:21:29Z

<!-- Create Dropdown -->
/* 1- First get total numbers of SELECT tags used in your page to avoid elements name/id issues.
 * 2- Get all OPTIONS user entered with comma separator into a text box.
 * 3- Split user OPTIONS and make an array of these OPTIONS.
 * 4- Create SELECT code.
 * 5- Appent it into the temp div (a hidden div in your page).
 * 6- Then get that code.
 * 7- Now append code to your actual div.
 * 8- Filnally make empty the temp div therfore it will be like a new container for next SELECT tag.
 */

total = $("select").size() + 1;                                         // 1-
var myoptions = $("#myoptions").val();                                  // 2-
var data = myoptions.split(',');                                        // 3-
var s = $("<select id=\""+total+"\" name=\""+total+"\" />");            // 4-
for(var val in data) {
    $("<option />", {value: val, text: data[val]}).appendTo(s);
}
s.appendTo("#tempselect");                                              // 5-
var getselectcode = $("#tempselect").html();                            // 6-
$("#msj_form").append(appendLabel+"<td>"+getselectcode+"</td></tr>");   // 7-
$("#tempselect").html('');                                              // 8-

<div style="display:none;" id="tempselect"></div>                       // Temp div

vogomatix · Accepted Answer · 2015-07-27 16:05:11Z

-1

Slight amendment to the answer by Ravi - appending each element one by one is a surprisingly high cost operation.

var s = $("<select id=\"selectId\" name=\"selectName\" />");
var opts = [];
for(var val in data) {
    opts.push( $("<option />", {value: val, text: data[val]}));
}

opts.appendTo(s);

edited Jul 27, 2015 at 16:05

answered Jul 4, 2014 at 13:24

vogomatix

5,1232 gold badges27 silver badges50 bronze badges

1 Comment

7stud Over a year ago

1) SyntaxError: missing ) after argument list, 2) TypeError: opts.appendTo is not a function.

RamGrg · Accepted Answer · 2014-02-28 09:17:23Z

var html = '<tr><td><label for="select" style="text-transform:   none;">Label_name</label></td>'
            +'<td><select name="select" id="">'
            +'<option>Choose number..</option>'
            +'<option value="0">1</option>'
            +'<option value="1>2</option>'
            +'<option value="2">3</option>'
            +'</select></td></tr>';

Let's suppose, the id of table = table_id

$('#table_id').append(html);
$('#table_id').trigger('create');

What i get is, if you don't call trigger(), the design of your select looks completely messed up..

Collectives™ on Stack Overflow

JQuery: Dynamically create select Tag

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Linked

Related