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

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

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

选择1
选择3
备选案文5
​

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

我想通过编程向这个选择列表添加一个新选项。我发现它为我提供了一个链接到一个优秀的网站

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

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

$（“#elementid选项：eq（0）”）。之后（“一些梨”

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

$("#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');​

我尝试了两件事：

$(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
});​

$（函数（）{
$（“#测试选择选项：等式（1）”）。在（“选项2”）之后；//方法A
$（“#测试选择选项：标签（1）”）。在（“选项2”）之后；//方法B
});​

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

1 3 2 5

方法B引发异常：

未捕获错误：语法错误，无法识别的表达式：不支持的伪：标签

然而，即使方法B起作用，我仍然会有一个问题，因为标签为

1

的选项可能实际上不存在。我真正想做的是将新选项插入列表中的正确位置（基于标签），而不管周围是否存在特定的选项元素

---

有什么办法吗？

您需要使用属性选择器的

[]

。您可以在此处阅读有关可用选择器的信息

$（“#测试选择选项[label=yourvalue]”）。在（“选项2”）之后//方法B

所以

$（“#测试选择选项[label=1]”//将获取选项1

新选项将插入该元素之后

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

$(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');
});​

$（函数（）{
$（“#测试选择选项”）
.添加（$（“选项7”））
.排序（功能（a、b）{
返回a.labelb.label-1:-1；
}).appendTo（“#testSelect”）；
});​

---

您需要使用属性选择器的

[]

。您可以在此处阅读有关可用选择器的信息

$（“#测试选择选项[label=yourvalue]”）。在（“选项2”）之后//方法B

所以

$（“#测试选择选项[label=1]”//将获取选项1

新选项将插入该元素之后

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

$(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');
});​

$（函数（）{
$（“#测试选择选项”）
.添加（$（“选项7”））
.排序（功能（a、b）{
返回a.labelb.label-1:-1；
}).appendTo（“#testSelect”）；
});​

这个怎么样

您可以在任意位置插入新选项，然后根据其标签值对选项进行排序

$("#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”）；
$（“#测试选择选项”）.sort（函数（a，b）{
if（$（a）.attr（'label'）<$（b）.attr（'label'））返回-1；
if（$（a）.attr（'label'）>$（b）.attr（'label'））返回1；
返回0；
}).appendTo（“#testSelect”）；​

这个怎么样

您可以在任意位置插入新选项，然后根据其标签值对选项进行排序

$("#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”）；
$（“#测试选择选项”）.sort（函数（a，b）{
if（$（a）.attr（'label'）<$（b）.attr（'label'））返回-1；
if（$（a）.attr（'label'）>$（b）.attr（'label'））返回1；
返回0；
}).appendTo（“#testSelect”）；​

$（“#testSelect option[label=1]”）之后（“option 2”）；

$（“#testSelect option[label=1]”）之后（“option 2”）；

啊，这是有意义的。但是，当所选索引不存在时，这将如何工作？（我问题的第二部分）示例：@Mansfield让我快速处理小提琴，我会用你的方法更新我的答案。我接受了j08691的答案，但这也很有帮助…+1Ahh是的，这很有意义。但是当选定的索引不存在时，这将如何工作？（我问题的第二部分）示例：@Mansfield让我快速操作小提琴，我会更新我的答案，告诉你如何操作。我已经接受了j08691的答案，但这也很有帮助…+1非常有用！非常感谢！非常有用！非常感谢！