JQuery：动态创建选择标签答案

【问题标题】：JQuery: Dynamically create select TagJQuery：动态创建选择标签
【发布时间】：2012-05-21 15:49:25
【问题描述】：

我正在使用 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");

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

但我也想将标签和<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>

【问题讨论】：

这看起来很简单……你试过什么？
为 td 标签提供一个 id，您需要在其中添加此 select 标签并附加到该 div。
我做了 jQuery("#msj_form").append(appendLabel+""+myelement+"");对于其他标签，它工作正常，但它不适用于选择标签。 @PhilemonphilipKunjumon：实际上我正在创建一个脚本，用户可以通过该脚本使用他/她的必填字段创建一个 HTML 表单，因此我无法对任何 td/tr 标签进行硬编码
你可以这样做 ..var final=' my label here '+s+' ' ，然后您可以附加到表 id $('#tableid').append(final);
@Tamkeen：我试过了：var final=" 我的标签在这里 "+s+" ";$(" #msj_form").appendTo(final);但没有显示，但当我尝试时： jQuery("#msj_form").append(final);浏览器显示：my label here [object Object]

【解决方案1】：

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

在 for 循环之后，用 TableRow 和 Cells 像这样包装所有内容，Jquery Wrap()

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

【讨论】：

漂亮干净，值得升级

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

1) SyntaxError: missing ) after argument list, 2) TypeError: opts.appendTo is not a function.

【解决方案4】：

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

假设，table的id = table_id

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

我得到的是，如果你不调用 trigger()，你的选择的设计看起来完全一团糟..

【讨论】：