动态添加选项答案

【问题标题】：Dynamically Adding Options动态添加选项
【发布时间】：2014-06-11 15:06:41
【问题描述】：

我有以下 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。感谢您的帮助！

【问题讨论】：

发布整个脚本或小提琴。
您为什么希望 .eq(n) 添加到孩子？ .eq(n) 选择与选择器匹配的nth 元素。
如果你想要第n个孩子，请使用.children().eq(n)。
会命中选项，而不是 optgroup 元素。请参阅下面的解决方案。
我会帮忙，但你提出问题而不选择答案。

标签： javascript jquery dom

【解决方案1】：

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

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

这将命中您选择 id 中的 optgroup。

【讨论】：

【解决方案2】：

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

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

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

我会这样写$option 定义行。

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

我会用这个代替switch 声明。

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

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

【讨论】：

为什么不认为可以在变量名中使用$？ jQuery 确实如此，它一直使用名为 $ 的变量。
这不会导致与 JQuerys $ 运算符冲突吗？
仅使用点符号：$.
什么样的冲突？变量Foo 不会与变量F 发生冲突，那么为什么$option 会与$ 发生冲突呢？你觉得$ 有什么特别之处吗？它不是一个运算符，它只是一个函数的名称。
@Barmar 更新以反映这次谈话。