JS/Jquery：如何检查下拉菜单是否选择了值？

Question

我已经搜索并尝试了许多方法，但都无法解决我的问题。我要做的事情非常简单：我想判断一个下拉菜单是否有选中的值。问题在于selectedIndex、:selected、val()等在以下情况下都会返回结果：

<select>
<option value="123">123</option>
<option value="234">234</option>
</select>

显然，浏览器会显示此下拉列表，并选择123选项，但只有因为没有其他选项可选，实际上该下拉列表没有选择的值，因为没有“selected”属性。因此，基本上我正在尝试找出如何区分上面的下拉列表和这个

<select>
<option selected value="123">123</option>
<option value="234">234</option>
</select>

- Eugene

Answer 1

var hasValue = ($('select > [selected]').length > 0);

或者说，

var hasValue = $('select').has('[selected]');

- John Strickler

Answer 2

快速解决方案：

<select>
<option selected></option>
<option value="123">123</option>
<option value="234">234</option>
</select>

首先，请查看您是否拥有一个.val()。

- Jason

---

虽然这个方法可行，但它不是一个解决方案，而只是一种权宜之计 :) 不幸的是，我正在处理一个已经存在的应用程序，其中没有第一个空元素。 - Eugene

@Eugene - 哦，不好意思！ $('select option').first().before("<option selected></option>");？哈哈。 - Jason

Answer 3

经过批准的答案对我不起作用。

这是我检查所有选择选项是否已选择的方法：

if($('select option:selected').length > 0) {
/* Do your stuff here */
}

- JasonP

Answer 4

据我所知，您的两个示例之间没有功能区别。基本上，浏览器会自动选择第一个option。

例如，请参见以下结果：

$('option:selected')

关于你的第一个例子。

如果你真的想要防止这种情况发生，你有两个选项。第一个是按照Jason的回答，在中引入一个新的空元素。另一个选项是取消自动选择的值： $(document).load(function(){ $('option:selected').attr('selected', false); }); 这将清除选择。 因此，任何$('select').val()的结果，如果不是空字符串，则表示用户进行了更改。

- lonesomeday