Question

我有以下html结构，我试图通过javascript在optgroups中添加选项元素。我也在使用jquery移动框架。

Html如下：

<form>
    <div class="ui-field-contain">
    <label for="selectID">Look-up</label>
    <select name="select-native-4" id="selectID">
       <option>Choose...</option>

           <optgroup label="G1" id="group1">                              
           </optgroup>
           <optgroup label="G2" id="group2">
           </optgroup>
           <optgroup label="G3" id="group3">
           </optgroup>

           </select>
       </div>
  </form>

javascript如下。

for( var i = 0; i < array.length; i++){
        var item = array[i];
        var $option = $('<option> ' + item.name + ' </option>');
        $option.prop('value', item.memb);
        console.log(item.name);
        var tp = -1;
        switch(item.name){
            case 'group1' :
                tp = 1;   break;
            case 'group2' :
                tp = 2;   break;
            case 'group3' :
                tp = 3;   break;
        }
        console.log(tp);
        //$("#selectID :nth-child(tp)").append($option);

        $("#selectID").eq(tp).append($option);
    }
    $('#selectID').selectmenu('refresh');
}

我很困惑为什么.eq（n）不会将$ option对象附加到#selectID的第n个子节点，这将是一个optgroup。谢谢你的帮助！

Answer 1

您只有1个#selectID。你需要：

$('#selectID optgroup').eq(tp).append($option);

这会点击您选择ID中的选项组。

Answer 2

您的代码将附加到Select对象而不是optgroup。

.eq(index)在该索引处为您提供与选择器匹配的对象。在这种情况下，只有一个选择，所以你不会去拿它。

这是我如何处理这个例子。

我会像这样编写$option定义行。

var $option = '<option> ' + item.name + ' </option>';

代替switch声明，我将其放入。

$("#"+item.name).append($option);

对于整个HTML页面，ID应该是唯一的，因此这应该是唯一具有该ID的组。在这种情况下，您可以将其直接添加到optgroup

动态添加选项

2 个答案: