使用JQuery在第一个选项元素之后添加一个新元素到选择框

Question

我有一个带有以下选项的组合框

<select id="history">
    <option></option>
    <option>element1</option>
    <option>element2</option>
    <option>element3</option>
    <option>element4</option>
</select>

我正在尝试在第一个选项后添加新选项。我试过的最有效的方法是什么？

<script type="text/javascript">
    $("#history").prepend("<option>sdsadas</option>").after('#history:first-child');
    $("<option>asdsad</option>").insertBefore('#history option:first-child');
//    $('option[value="sadsaddsad"]', this).after('option:first');
</script>

但这些都不是我想要的。

Answer 1

你可以这样做：

$("#history option:first").after("<option>sdsadas</option>");

这将获得第一个<option>标记，然后在其后插入一个新选项。

---

jQuery支持两种插入位置的方式。以上版本为target.after(content)，另一种方式为content.insertAfter(target)：

$("<option>sdsadas</option>").insertAfter("#history option:first");

注意：一个使用.after()，另一个使用.insertAfter()。

Answer 2

使用

$("#history option:eq(0)").after("<option>New Option Added</option>");

来源：http://www.myphpetc.com/2009/03/jquery-select-elements-tips-and-tricks.html

Answer 3

使用以下内容：

$("<option>asdsad</option>").insertBefore($('#history option:first-child'));

而不是：

$("<option>asdsad</option>").insertBefore('#history option:first-child');