Question

我有一个如下所示的选择列表：

<select id="testSelect">
    <option value="option1" label="1">Option 1</option>
    <option value="option3" label="3">Option 3</option>
    <option value="option5" label="5">Option 5</option>
</select>

我正在使用标签来控制选项的显示顺序。初始选择列表的顺序正确（尽管缺少项目）。

我想以编程方式为此选择列表添加一个新选项。我发现this question为我提供了一个优秀jquery select cheat sheet的链接。

此备忘单提供以下代码以在特定索引处添加选项，这与我想要做的类似：

$("#elementid option:eq(0)").after("<option value='4'>Some pears</option>"

但是，我不需要在特定索引后插入新选项（因为这些项将被删除并重新添加多次），我需要根据标签值以正确的顺序插入选项。

我尝试了两件事：

$(function () {
   $("#testSelect option:eq(1)").after("<option value='option2' label='2'>Option 2</option>"); //Method A
    $("#testSelect option:label(1)").after("<option value='option2' label='2'>Option 2</option>"); //Method B
});

方法A在列表中的第二项之后插入新项目，这使我的列表看起来像：1 3 2 5

方法B抛出异常：Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: label

但是，即使方法B有效，我仍然会遇到问题，因为标签为1的选项可能实际上不存在。我真正想做的是将新选项插入列表中的正确位置（基于标签），无论周围是否存在特定的选项元素。

有什么想法可以做到这一点？ jsfiddle

Answer 1

您需要使用[]属性选择器。您可以在此处阅读http://api.jquery.com/category/selectors/

中可用的选择器

$("#testSelect option[label=yourvalue]").after("<option value='option2' label='2'>Option 2</option>"); //Method B

所以

$("#testSelect option[label=1]") // will grab <option value="option1" label="1">Option 1</option>

新选项将插入该元素

之后

您可以相应地对元素进行排序

$(function() {    
    $('#testSelect option')
          .add($("<option value='option7' label='7'>Option 7</option>"))
          .sort(function(a, b) {
                return a.label < b.label ? -1 : a.label > b.label ? 1 : -1;
          }).appendTo('#testSelect');
});

http://jsfiddle.net/5ksh7/

Answer 2

这个怎么样？

<强> jsFiddle example

您可以在任何地方插入新选项，然后根据标签值对选项进行排序。

$("#testSelect").append("<option value='option2' label='2'>Option 2</option>");

$("#testSelect option").sort(function(a, b) {
    if ($(a).attr('label') < $(b).attr('label')) return -1;
    if ($(a).attr('label') > $(b).attr('label')) return 1;
    return 0;
}).appendTo('#testSelect');

添加选项以在指定的索引处选择（使用标签）

2 个答案: