javascript - 如何将 OPTGROUP 添加到 select 语句？

Question

我正在使用以下内容通过 jQuery 构建一个下拉选项:

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

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

构建下拉菜单，没问题 - 然后我尝试附加 optgroup 选项 - 我尝试添加以下代码以将 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>

欢迎任何建议。

Answer 1

像 html 字符串一样考虑 jQuery append() 是您在这里面临的问题。

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>