Question

我有一个现有的选择：

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。

Answer 1

.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元素。这意味着没有必要关闭传递到$()函数的元素标记。

Answer 2

你可以简单地使用一个字符串并附加：

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

使用jquery将optgroup添加到现有select

2 个答案: