我有一个现有的选择：
var $selectStatus = jQuery("<select id='Status' name='status'></select>");
var enabledHtml = "<option value='ENABLED'>"ON"</option>";
var disabledHtml = "<option value='DISABLED'>"OFF"</option>";
var $statusEnabled = jQuery(enabledHtml);
var $statusDisabled = jQuery(disabledHtml);
//some code to add "selected" properties
...
//finally add to select
$selectStatus.append($statusEnabled, $statusDisabled);
这将产生一个带有ON / OFF选项的选择。现在我想添加一个optgroup以及一些存储在数组中的值。
那么你应该得到的是一些选择：
<select>
<option value="ENABLED">ON</option>
<option value="DISABLED">OFF</option>
<optgroup label="Info">
<option value="some value">some value</option>
<option value="some value">some value</option>
...
</optgroup>
</select>
它可以是一个空的optgroup，没有选项值或任意数量的选项值。
我试过这个：
var status_optgroup_open = "<optgroup label='Info'>"
for(i=0;i<info.length;i++)
{
$foobar = jQuery('#Status').append(jQuery('<option/>').val(info[i].info_name).html(info[i].info_name));
}
var status_optgroup_close = "</optgroup>"
var $statusOpen = jQuery(status_optgroup_open);
var $statusClose = jQuery(status_optgroup_close);
$selectStatus.append($statusEnabled, $statusDisabled, $statusOpen, $foobar, $statusClose);
info [i] .info_name的输出是我所期望的，但我不确定如何在这个上下文中附加它们。现在，这只会产生一个空的optgroup。
.append()函数不仅仅连接传递给它的所有字符串。
所以这个：$("body").append("<p>","hi","</p>")不会产生<p>hi</p>
相反，它将获取数组中的每个元素，如果需要将它们添加到DOM，并将这些元素添加到父元素。所以实际输出看起来像这样：
<p></p>
"hi"
<p></p>
相反，你想要做的是创建optgroup并将所有单独的选项附加到其中。然后将整个对象（children和all）添加到select元素中，如下所示：
var info = [
{info_name: 'Some Value 1'},
{info_name: 'Some Value 2'}
];
// create select
var $selectStatus = $("<select id='Status' name='status'>");
// create options
var enabled = "<option value='ENABLED'>ON</option>";
var disabled = "<option value='DISABLED'>OFF</option>";
// create opt group
var $optgroup = $("<optgroup label='Info'>");
for (i=0; i<info.length; i++) {
var op = "<option value='" + info[i].info_name + "'>" + info[i].info_name + "</option>";
$optgroup.append(op);
}
// create select
$selectStatus.append(enabled, disabled, $optgroup);
// add select to page
$("body").append($selectStatus);<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>注意：jQuery将自动从jQuery constructor $(<html>)中提供的字符串创建DOM元素。这意味着没有必要关闭传递到$()函数的元素标签。
你可以简单地使用一个字符串并附加：
var optgroup = "<optgroup label='Info'>";
for (var i = 0; i < info.length; i++) {
name = info[i].info_name;
optgroup += "<option value='" + name + "'>" + name + "</option>"
}
optgroup += "</optgroup>"
$('select').append(optgroup);