Question

仅使用javaScript（无jQuery）如何将所选索引设置为选项组下面的第一个选项。填充时，每个组下面的选项数量是可变的，但是在选项数组中，它们按顺序编号，因此很难确定一个组的结束位置和下一个组的开始位置。我有一个变量，引用了我想要使用的组选项ID。

<select id="selectBox">
  <optgroup id="optGrp1" label="Group 1">
  <optgroup id="optGrp2" label="Group 2">
    <option value="1585">option 1 in group 2</option>
    <option value="1589">option 2 in group 2</option>
  </optgroup>
  <optgroup id="optGrp3" label="Group 3">
  <optgroup id="optGrp4" label="Group 4">
</select>

Answer 1

var group = 'optGrp2';
var optgroup = document.getElementById(group);
var options = optgroup.getElementsByTagName('option');
if (options.length) {
    options[0].selected = true;
}

Answer 2

Kristoffer的第一个答案正是我所需要的。以下是代码的完整示例及其建议：

首先调用我的表单类中的方法来填充列表框

//sample arrays
g.groups = {grpKey1:"label1", grpKey2:"label2"...}
g.options = {grpKey1:{optVal:"optTxt",optVal:"optTxt",...}, 
             grpKey2:{optVal:"optTxt",optVal:"optTxt",...},...}

//a reference to the select box and two arrays are passed to the method 
g.addGroupOptions(document.getElementById("mySelectBox"), g.groups, g.options); 

//this method in my form class populates the list box 
//with group labels and options under each label
this.addGroupOptions = function (selectBox, grpArray, optArray)
{
    for ( var grpKey in optArray )
    {
        var group = document.createElement('optgroup'),
            opt   = document.createElement('option');

        //retrive group label from groups array
        group.id    = grpKey;
        group.label = grpArray[grpKey];

        /*
        loop optArray[grpKey] get each subKey 
        */
        for ( var subKey in optArray[grpKey] )
        {
            opt.text   = optArray[grpKey][subKey];
            opt.value = subKey;
            group.appendChild(opt.cloneNode(true));
        }
    //append option group and subordinate options to list box
    selectBox.appendChild(group);
    }
}

然后应用Kristoffer的建议将所选项目设置为所需选项组中的第一个选项。

    document.getElementById(document.getElementById( myVariable ).value).getElementsByTagName('option')[0].selected = true;

将selectedIndex设置为下面的第一个选项和选项组

2 个答案: