我有一个看起来像这样的选择列表:
<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