JS/Jquery：如何检查下拉列表是否已选择值？

Question

我已经用谷歌搜索并尝试了多种方法来做到这一点，但到目前为止没有一个对我有用。我正在寻找的东西非常简单：我希望能够判断下拉列表是否具有选定的值。问题是 selectedIndex、:selected、val() 等确实会返回以下情况的结果：

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

显然，浏览器将显示此下拉列表，其中选择了 123 选项，但它只会被选择，因为没有其他选项，实际上，这个下拉列表没有选定的值，因为没有“选定”属性。所以基本上我想找到如何区分上面的下拉列表和这个下拉列表

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

Answer 1

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

或者，

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

Answer 2

快速解决方案：

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

然后查看是否有 .val()

Answer 3

批准的答案似乎对我不起作用。

以下是我检查是否选择了所有选择选项的方法：

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

Answer 4

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

例如，请参阅

$('option:selected')

第一个示例的结果。

如果您确实想防止这种情况发生，您有两种选择。第一个是根据 Jason 的回答，在 select 中引入一个新的空元素。另一个选项是取消选择自动选择的值：

$(document).load(function(){
    $('option:selected').attr('selected', false);
});

这将清除选择。因此，任何非空字符串的 $('select').val() 结果都将是用户所做的更改。