JQuery：动态创建选择标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10578619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery: Dynamically create select Tag
提问by PHP Ferrari
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:
我正在使用 JQuery 动态（基于用户选择）创建标签。用户在文本框中输入要求选项，我的代码创建它的选择标签。脚本是：
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:
其中 msj_form 是我添加标签的 div id。现在它创建：
<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>代码与标签结合起来，这样代码看起来像：
<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>
采纳答案by PHP Ferrari
<!-- 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
回答by Ravi Gadag
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()
在 for 循环之后，像这样用 TableRow 和 Cells 包裹所有内容，Jquery Wrap()
$(s).wrap('<table><tr><td></td></tr></table>');
回答by vogomatix
Slight amendment to the answer by Ravi - appending each element one by one is a surprisingly high cost operation.
Ravi 对答案的轻微修改 - 一个一个地附加每个元素是一个惊人的高成本操作。
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);
回答by RamGrg
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
假设表的id = 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..
我得到的是，如果你不调用 trigger()，你选择的设计看起来完全一团糟..
