0

我有一个看起来像这样的选择列表：

<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>​

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

我想以编程方式向此选择列表添加一个新选项。我发现这个问题为我提供了一个优秀的jquery select 备忘单的链接。

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

$("#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

4

2 回答 2

4

您需要使用[]for 属性选择器。您可以在此处阅读有关可用选择器的信息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/

于 2012-12-12T16:21:52.370 回答
2

这个怎么样？

jsFiddle 示例

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

$("#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');​
于 2012-12-12T16:30:17.520 回答