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

时间:2012-03-21 07:28:40

标签: javascript jquery select

是否可以检测在选择框中是否未明确选择任何选项?

我尝试过这些方法,但没有一种方法有效:

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

试验1:

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'

任何想法SO人?

5 个答案:

答案 0 :(得分:21)

试试这个:

<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:您必须将第一个值设为默认值。

答案 1 :(得分:5)

这是普通选择元素的工作原理:如果没有其他选项设置了selected属性,则选择第一个选项。最简单的解决方法是添加选项作为第一个选项,如下所示:

<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>

在jQuery中,您可以测试以下条件之一:

$("#mySelect").val() === "";
$("#mySelect option:selected").index() == 0;
$("#mySelect option:first:selected").length != 0;

答案 2 :(得分:3)

选择框始终具有值。如果您不从默认值手动更改,则仍然有值。要查看显式更改,您可以监控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');

答案 3 :(得分:0)

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

的方式对其进行验证

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

答案 4 :(得分:0)

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