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>

如何在选择语句中添加OPTGROUP？

1 个答案: