1

我有以下 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 时是否格式不正确，所以它被忽略了......

谢谢！

4

5 回答 5

4

尝试这个：

$("#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>");
});
于 2013-08-19T20:54:56.113 回答
2

append()仅将一个元素附加到另一个元素。您需要做的是制作一个有效的选择标签。然后，您可以将选项附加到该选项。请参阅文档。

$("#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>");
于 2013-08-19T20:53:21.737 回答
2

改为这样做：

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);
于 2013-08-19T20:53:38.917 回答
2

这一行：

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

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

.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>")
);
于 2013-08-19T20:56:04.757 回答
1

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

$("#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>");
于 2013-08-19T20:53:19.393 回答