JQuery：动态创建选择标签

Question

我正在使用JQuery动态地（基于用户选择）创建标签。用户在文本框中输入require选项，我的代码创建它的选择标签。 脚本是：

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"); 

其中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> 

但我也想concatinate一个标签和<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> 

Answer 1

<!-- 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 

Answer 2

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

for循环之后，用TableRow和Cells这样的所有内容包装起来，0​​

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

Answer 3

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>'; 

让我们假设，表的id = table_id的

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

我所得到的是，如果你不叫触发（），您的选择外观设计完全弄乱..

Answer 4

轻微修正由拉维答案 - 追加每个元件一个接一个是一个令人惊讶的高运行成本。

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);