Question

我有以下HTML：

<div id='show-label'>
  <select id="comboboxShowLabel">
    <option value="">Hide or show labels?</option>
    <option value="Show Labels">Show Label</option> 
    <option value="Hide Labels">Hide Label</option>
  </select>
</div>

我想在运行时将<select></select>添加到父div，ala：

     <div id='show-label'>
     </div>

    $("#show-label").html("<select id='comboboxShowLabel'>")
        .append("<option value=''>Hide or show labels?</option>")
        .append("<option value='Show Labels'>Show Label</option>")
        .append("<option value='Hide Labels'>Hide Label</option>")
        .append("</select>");

对于我不知道的回复，结束标记不会被注入页面。

我已尝试过以上代码以及类似的内容：

.append("<option value='Hide Labels'>Hide Label</option></select>")

对于将这些元素“批处理”到单个.append中是否存在某种排序要求？我想知道这种方法在加载到DOM时看起来是不是很好，所以它被忽略了......

谢谢！

Answer 1

试试这个：

$("#show-label").append(function() {
    return $("<select id='comboboxShowLabel'>")
        .append("<option value=''>Hide or show labels?</option>")
        .append("<option value='Show Labels'>Show Label</option>")
        .append("<option value='Hide Labels'>Hide Label</option>");
});

Answer 2

append()只将一个元素附加到另一个元素。您需要做的是创建一个有效的选择标记。然后，您可以将选项附加到该选项。请参阅the documentation。

$("#show-label").html("<select id='comboboxShowLabel'></select>")
$('#show-label select').append("<option value=''>Hide or show labels?</option>")
    .append("<option value='Show Labels'>Show Label</option>")
    .append("<option value='Hide Labels'>Hide Label</option>");

Answer 3

请改为：

var $select = $("<select id='comboboxShowLabel'></select>");
$("#show-label").html($select);
$select.append("<option value=''>Hide or show labels?</option>")
    .append("<option value='Show Labels'>Show Label</option>")
    .append("<option value='Hide Labels'>Hide Label</option>");

如果你因为某种原因需要追加。否则就这样做，以获得更好的浏览器效率（一次更改为实际的dom而不是多次）：

var $select = $("<select id='comboboxShowLabel'></select>")
    .append("<option value=''>Hide or show labels?</option>")
    .append("<option value='Show Labels'>Show Label</option>")
    .append("<option value='Hide Labels'>Hide Label</option>");
$("#show-label").html($select);

Answer 4

这一行：

$("#show-label").html("<select id='comboboxShowLabel'>")

设置#show-label的html，并返回表示#show-label的jQuery对象。第二部分在那里很重要，因为它意味着你的下一行，

.append("<option value=''>Hide or show labels?</option>")

也会附加到#show-label，这不是您想要的。试试这个：

$("#show-label").empty().append(
    $('<select/>')
        .append("<option value=''>Hide or show labels?</option>")
        .append("<option value='Show Labels'>Show Label</option>")
        .append("<option value='Hide Labels'>Hide Label</option>")
);

Answer 5

您可以简单地附加已完成的选择，然后将选项添加到其中：

$("#show-label").html("<select id='comboboxShowLabel'></select");
$("#comboboxShowLabel")
    .append("<option value=''>Hide or show labels?</option>")
    .append("<option value='Show Labels'>Show Label</option>")
    .append("<option value='Hide Labels'>Hide Label</option>");

忽略了标记的JQuery .append

5 个答案: