如何将 OPTGROUP 添加到选择语句？答案

【问题标题】：How can I add OPTGROUP to select statement?如何将 OPTGROUP 添加到选择语句？
【发布时间】：2017-10-23 22:30:25
【问题描述】：

我正在使用以下方法通过 jQuery 构建一个下拉选项：

var myOptions = {
    var1 : 'Road',
    var2 : 'Rail'
};

var mySelect = $('#q54');
    $.each(myOptions, function(val, text) {
        mySelect.append(
            $('<option></option>').val(text).html(text)
    );
});

构建下拉列表，没问题 - 然后我尝试附加 optgroupoptions - 我尝试添加以下代码以将 optgroup 包裹在选项周围，但没有任何乐趣。

var i = 1; // Addition
$.each(myOptions, function(val, text) {
    if(i == 1){
        $("#q54").append('<optgroup class="optgroups" label="Team">');
    }
    mySelect.append(
        $('<option></option>').val(text).html(text)
    );
    if(i == 2){
        $("#q54").append('</optgroup>');
    }
});

上面的HTML输出是：

<optgroup class="optgroups" label="Team"></optgroup>
<option value="Road">Road</option>

输出应该是：

<optgroup class="optgroups" label="Team">
    <option value="Road">Road</option>
</optgroup>

欢迎任何建议。

【问题讨论】：

api.jquery.com/wrapall
$("#q54").append('</optgroup>') 这是不正确的，append 不像连接 html 那样工作。当您执行$("#q54").append('<optgroup class="optgroups" label="Team">') 时，标签将被创建为一个对象（也可以将其视为带有关闭的标签）。
@RejithRKrishnan - 有道理 - 然后我更难过该怎么办！

标签： javascript jquery select drop-down-menu optgroup

【解决方案1】：

考虑到 jQuery append() 之类的 html 字符串是您在这里面临的问题。

var myOptions = {
    var1 : 'Road',
    var2 : 'Rail'
};    
var i = 1; // Addition
var $group = $('<optgroup class="optgroups" label="Team">');
$("#q54").append($group);
$.each(myOptions, function(val, text) {
    $group.append($('<option></option>').val(text).html(text));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="q54"></select>

另一个解决方案是像 Pointy 建议的那样使用 wrapAll()。

var myOptions = {
    var1 : 'Road',
    var2 : 'Rail'
};    
var i = 1; // Addition
$.each(myOptions, function(val, text) {
    $("#q54").append($('<option></option>').val(text).html(text));
});
$("#q54").children().wrapAll('<optgroup class="optgroups" label="Team">');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="q54"></select>

【讨论】：

感谢您 - 非常感谢。如果公路和铁路都需要optgroup，我试图弄清楚这将如何运作。
应该说，如果公路和铁路需要“单独的”选项组。