JQuery：动态创建选择标签 [英] JQuery: Dynamically create select Tag

问题描述

我使用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 =selectIdanme =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> 
  

但我也想要将一个Label和< tr><

 < / code>< / code>代码以及标记
，使得代码如下所示：< ; TR> 
< td>我的标签< / td> 
< td> 
< select id =selectIdanme =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> 
  

解决方案

<！ - Create Dropdown - >
/ * 1-首先获取页面中使用的SELECT标记的总数，以避免元素名称/ ID问题。
* 2-将所有使用逗号分隔符输入的OPTIONS用户输入到文本框中。
* 3-将用户OPTIONS拆分并制作这些选项的数组。
* 4-创建SELECT代码。
* 5-将它追加到temp div（页面中的隐藏div）。
* 6-然后获取该代码。
* 7-现在将代码附加到您的实际div上。
* 8-通常会将临时分区清空，因此它将成为下一个SELECT标签的新容器。
* /

total = $（select）。size（）+ 1; // 1-
var myoptions = $（＃myoptions）。val（）; // 2-
var data = myoptions.split（'，'）; // 3-
var s = $（< select id = \+ total +\name = \+ total +\/>）; （数据）中的（var val）{
$（< option />，{value：val，text：data [val]}）。appendTo（s）; // 4-

}
s.appendTo（＃tempselect）; // 5-
var getselectcode = $（＃tempselect）。html（）; // -
$（＃msj_form）。append（appendLabel +< td>+ getselectcode +< / td>< / tr>）; // 7-
$（＃tempselect）。html（''）; // 8-

< div style =display：none; ID = tempselect >< / DIV> // Temp div


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>

解决方案

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

这篇关于JQuery：动态创建选择标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！