jquery - 使用 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');