将空白选项添加到选择顶部并使其成为 IE 中的选定选项

Posted 2023-05-09

【中文标题】将空白选项添加到选择顶部并使其成为 IE 中的选定选项

【英文标题】：Add blank option to top of select and make it the selected option in IE

【发布时间】：2011-10-29 20:42:00

【问题描述】：

html：

<select id="dropdown">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

jQuery:

$("#dropdown").prepend("<option value='' selected='selected'></option>");

当我在 FireFox 或 Chrome 中运行它时，下拉列表中选择了新插入的空白选项。当我在 IE8 中运行它时，它仍然选择了沃尔沃。有什么想法吗？

http://jsfiddle.net/YFu2h/

【参考方案1】：

改成这个，就可以了：

$("#theSelectId").prepend("<option value=''></option>").val('');

http://jsfiddle.net/YFu2h/1/

似乎 IE 仅在第一次遇到 select 时才评估 selected 属性。

【讨论】：

这会将 val 设置为空。删除您最初拥有的所有选定项目

@HarryBosh - ...这正是 OP 所要求的。

【参考方案2】：

我不确定您的代码为什么不起作用（可能与在 IE 中，selectedIndex 是只读的这一事实有关）但是，这样做在 IE 中有效：

$("#dropdown").prepend("<option value='' selected='selected'></option>");
$("#dropdown")[0].options[0].selected = true;

【参考方案3】：

试试：

$("#dropdown").prepend(new Option('', '', true, true));
$("#dropdown option:first").attr("selected", "selected");

或者，如果您愿意：

$("#dropdown").prepend("<option value=''></option>");
$("#dropdown option:first").attr("selected", "selected");

使用第一个选项会稍微快一些。空白引号表示空白值和空白文本，因此请根据需要填写。您不需要在前面添加 selected 属性，现在我们将在之后添加它们。这与 Internet Explorer 未识别它被标记为选中有关，因为它刚刚创建。

【参考方案4】：

$("#id").prepend("<option value=' ' selected='selected'></option>");

prepend 会将选项添加到顶部，selected='selected' 会将其选中。由于value=' '，所以是空值选项。

【讨论】：

感谢 David Angulo 的提问，请立即查看。