使用jQuery将下拉框的值设置为第一个选项。

Question

我正在动态填充一个选择框的选项。这样做时，我希望选择框的值是第一个选项的值（如果您喜欢，可以称之为“默认选项”）。听起来非常简单，但我就是无法让它工作。

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());

我哪里做错了？

- DatsunBing

---

你是如何填充选项的？你能创建一个JSFiddle示例吗？ - Phil

我所看到的唯一原因是第一个选项的值为空，如果在更正后您仍然得到空结果。 - Arun P Johny

Answer 1

选项应该是单数形式

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

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

如果您知道第一个选项的值，那么就可以简单地执行以下操作。

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

你尝试的第二种情况应该是可行的，除非你没有在正确的时间进行调用。即等待 ajax 响应完成之后再调用。

尝试在 done 或者 success（已弃用）处理程序内部进行调用。

- Sushanth --

---

谢谢Sushanth - 你说得对，我不应该等待ajax完成。 - DatsunBing

@Sushanth - 这会触发与所讨论的选择器相关联的任何.change()监视程序吗？ - Plummer

Answer 2

你差不多就快做到了，在“options”中去掉“s”即可：

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

Working jsFiddle

- Yotam Omer

---

@KimPrince 为什么？看看这个jsFiddle，它可以工作...我已经在最后一个选项上设置了"selected"，然后使用这段代码恢复到第一个选项。 - Yotam Omer

谢谢Yotam，你说得对，但我并没有等待ajax调用完成。请看Sushanth的回复... - DatsunBing

Answer 3

您还可以使用以下代码：

您可以使用以下代码：

myElement[0].selectedIndex = 0;

这个获得了Dom元素（非jQuery对象），使用Vanilla Javascript并根据其索引将第一个选项设置为所选。

- Marin Bînzari

Answer 4

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

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

这样你就可以检查HTML节点是否具有属性value并且不为空。

- Nima Izadi