如何在开头添加选项？答案

【问题标题】：How can I add an option in the beginning?如何在开头添加选项？
【发布时间】：2011-05-09 08:00:10
【问题描述】：

我有 html 选择，

<select id="myselect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

我需要在此选择中添加新选项。如果我这样尝试：

$('#myselect').appendTo($('<option>my-option</option>'));

my-option 已添加到末尾

<select id="myselect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>my-option</option>
</select>

如何在开头添加一个选项（作为第一个）？像这样：

<select id="myselect">
    <option>my-option</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

【问题讨论】：

【解决方案1】：

首先，您的意思是append，而不是appendTo。 append 将参数的内容添加到选择中； appendTo 将选择附加到参数中指定的元素。

其次，也许直觉上，你可以使用prepend：

$('#myselect').prepend($('<option>my-option</option>'));

【讨论】：

【解决方案2】：

在 POJS 中你会使用insertBefore()，例如

var select = document.getElementById('mySelect');
var opt = new Option('', 'my-option');
select.insertBefore(opt, select.firstChild);

【讨论】：

我使用了非常相似的东西。我将最后一行更改为： select.insertBefore(opt, select.options[0]);这样做的好处是，您可以在选择中的任何位置插入您的选项，这是我需要做的。
IMO 这是 jQuery 的首选选项。另见：i.stack.imgur.com/Bzawb.gif

【解决方案3】：

使用prependTo()

$('#myselect').prependTo($('my-option'));//错字？

你可能是这个意思

$('#myselect').prepend($('<option>my-option</option>'));

但您的代码实际上是相反的。这可能是一个错字。无论如何，可用的方法是prepend() 和prependTo()

【讨论】：