将输入按顺序插入到选择中

Question

HTML:
<select id="list">
    <option value="A">Alpha</option>
    <option value="B">Bravo</option>
    <option value="D">Delta</option>
</select>

jQuery:
$("#list").append("<option value=\"C\">Charlie</option>");

有没有简单的方法可以在B和D之间获得选项C？

Answer 1

您可以使用insertAfter()：

$("<option value=\"C\">Charlie</option>").insertAfter('#list > option[value="B"]');

...或insertBefore()：

$("<option value=\"C\">Charlie</option>").insertBefore('#list > option[value="D"]');

Here's a fiddle

Answer 2

$("option[value='B']").after("<option value=\"C\">Charlie</option>");

official docu中after（）和insertAfter（）的更多信息（两者都采取不同的方式）。

Answer 3

使用before()：

尝试此操作

$("#list option[value=D]").before("<option value='C'>Charlie</option>");

这将在选项Charlie之前插入由参数指定的新选项Delta。

Answer 4

您可以尝试使用属性选择器：

$("<option value=\"C\">Charlie</option>").insertAfter($('#list option[value*="B"]'));

Fiddle