使用 jQuery 将选择框值设置为第一个选项答案

【问题标题】：Use jQuery to set select box value to first option使用 jQuery 将选择框值设置为第一个选项
【发布时间】：2013-08-23 00:52:29
【问题描述】：

我正在使用选项动态填充选择框。当我这样做时，我希望选择框的值是第一个选项的值（如果您愿意，可以选择“默认选项”）。听起来很简单，但我就是无法让它工作。

var myElement = $('select[name="myName"]');

....尝试了以下三种变体

// myElement.find('option').first().prop('selected', 'selected');
// myElement.val(myElement.find('options').first().val());
myElement.prop('selectedIndex', 0);

...但是下面一行给出了一个空白警告

alert(myElement.val());

我哪里错了？

【问题讨论】：

您如何填充选项？你能创建一个 JSFiddle 示例吗？
我看到的唯一原因是第一个选项的值为空白，如果在更正后您也因此结果为空白

标签： javascript jquery

【解决方案1】：

options 应该是 option

myElement.find('option:eq(0)').prop('selected', true);

您可以使用选项上的eq 选择器来选择第一个选项。

如果你知道第一个选项的价值。然后你可以简单地做

myElemeent.val('first value') // Which selects the option by default

您尝试的第二种情况应该可以工作，除非您没有在正确的位置打电话。 IE;等待 ajax 响应完成。

尝试在 done 或 success（已弃用）处理程序中调用它

【讨论】：

感谢 Sushanth - 你说得对，我没有等待 ajax 完成。
@Sushanth-- 这会触发与相关选择关联的任何 .change() 观察者吗？

【解决方案2】：

你几乎明白了，把's'去掉'options'：

myElement.val(myElement.find('option').first().val());

Working jsFiddle

【讨论】：

@KimPrince 为什么？看看this jsFiddle 它的工作原理。我在最后一个选项上设置了“已选择”，然后使用此代码恢复为第一个选项
谢谢 Yotam，你是对的，但我没有等待 ajax 调用完成。见 Sushanth 的回应...

【解决方案3】：

你也可以使用下一个代码：

myElement[0].selectedIndex = 0;

这个 get 是 Dom 元素（不是 jQuery 对象），适用于 vanilla Javascript，并使用它将第一个选项设置为基于它的索引的选定选项。

【讨论】：

【解决方案4】：

如果您想确保您的选项具有价值而不是占位符，您可以这样做：

$('select option').filter( function (index, option) {
  return option.attributes.value
}).val()

这样您将检查 HTML 节点是否具有属性 value 并且不为空。

【讨论】：