Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery: Dynamically create select Tag

Tags:

html

jquery

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

like image 971
PHP Ferrari Avatar asked May 14 '12 06:05

PHP Ferrari


People also ask

How to create select option dynamically in jQuery?

var select = $("<select></select>"); var opt = $("<option></option"); opt. val("1"); opt. html("Option 1"); select.

How to add select option value in jQuery dynamically?

Method 1: Append the option tag to the select box The select box is selected with the jQuery selector and this option is added with the append() method. The append() method inserts the specified content as the last child of the jQuery collection. Hence the option is added to the select element.

How do I add a select option dynamically?

To dynamically add options to an existing select in JavaScript, we can use a new Option object append it to the select element with the options. add method. to add a select element. to select the select element with document.

How to create a select element in JavaScript?

The <select> element can be created by using the document. createElement() method and it can be accessed using the getElementById(). Syntax: It is used to create <select> element.


2 Answers

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>');
like image 131
Ravi Gadag Avatar answered Oct 05 '22 23:10

Ravi Gadag


<!-- 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
like image 30
PHP Ferrari Avatar answered Oct 05 '22 23:10

PHP Ferrari