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>
var select = $("<select></select>"); var opt = $("<option></option"); opt. val("1"); opt. html("Option 1"); select.
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.
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.
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.
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>');
<!-- 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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With