jQuery：如何检查是否在选择框中明确选择了 NO 选项

Question

是否可以检测选择框中是否没有明确选择任何选项？

我已经尝试了这些方法，但它们都不起作用：

<select id="mySelect">
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>

试验一：

alert($('#select option:selected').length); // returns 1

试验 2：

alert($('#select option[selected=selected]').length); // returns 1

试验 3：

alert($('#select option:selected').attr('selected')); // returns 'selected'

有什么想法吗？

Answer 1

选择框总是有一个值。如果您不手动更改默认值，您仍然有一个值。如您所说，要检查 显式 更改，您可以监视change：

$('#select').change(function() { $(this).data('changed', true); });

那么，你的条件是：

if(!!$('#select').data('changed')) { ... }

实现类似功能的更常见方法是在顶部插入一个占位符值：

<option value="0">Please select one item</option>

...并测试

$('#select').val() == '0'

如果你需要查明select是否已经从原来的值改变了，即上面的测试，但要确保用户没有切换回默认值，你可以简单地在页面加载时存储原来的值：

$('#select').data('original-value', $('#select').val());

并检查

$('#select').val() != $('#select').data('original-value');

Answer 2

这是 normal 选择元素的工作方式：如果没有其他选项设置 selected 属性，则选择第一个选项。最简单的解决方法是添加一个 empty 选项作为第一个选项，如下所示：

$(function() {
  console.log($("#mySelect").val());
  console.log($("#mySelect").get(0).selectedIndex);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="mySelect">
  <option value="">-- select an item --</option>
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>

然后测试以下条件之一：

$("#mySelect").val() === "";
$("#mySelect").get(0).selectedIndex === 0;
$("#mySelect option:selected").index() === 0;

Answer 3

默认情况下，索引 0 上的任何选项都会被浏览器视为已选择。问题的解决方案是在索引 0 处插入一个虚拟选项，在提交表单之前，您可以使用类似

的东西来验证它

if($("#selectBox option").index("option:selected")>0) $("#myForm").submit();

Answer 4

试试这个：

<select id="mySelect">
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select><input type="button" id="btncheck" value="check"/>

使用这个 JS：

$('#btncheck').click(function(){
     if ($("#mySelect ")[0].selectedIndex <= 0) {
                alert("Not selected");
            }
    else
        alert("Selected");
});

​它会检查你的下拉菜单是否被选中。

试试这个小提琴：http://jsfiddle.net/aPYyt/

​希望对您有所帮助！

PS：您必须将第一个值设为默认值。

Answer 5

var $inputs_select_options = $('option:selected');      

// remove empty(first option as default , value=="" ) options:
$inputs_select_options = $inputs_select_options.filter(function() {
    return this.value.length; //check by length value
});