2012-03-21 187 views
8

是否可以检测在选择框中是否没有明确选择选项?jQuery:如何检查是否在选择框中明确选择了否选项

我尝试了这些方法,但他们没有工作:

<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人吗?

+0

你总是将不得不因为默认情况下它会始终选择在页面加载的第一个项目选择的选项。您需要添加'',并测试该值是否为空。 – Ohgodwhy 2012-03-21 07:32:11

+0

@Ohgodwhy我在运行时选择了一个。但它永远不会来自':selected'。 jQuery':selected'不考虑动态添加选项吗? – craftsman 2012-03-21 07:35:45

+1

你假设正确。 Prepend在dom加载后添加它,因此所选的第一个项目将是DOM加载时第一个项目。 – Ohgodwhy 2012-03-21 07:39:37

回答

20

验证它试试这个:

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

+0

+1太棒了!这正是我想要的。 – craftsman 2012-03-21 07:47:33

+1

也许有必要补充说,如果没有选择任何内容,selectedIndex属性返回'-1':https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Property/selectedIndex – Daan 2015-06-08 10:21:40

+0

RE:-1值当没有选择任何东西时 - 这不是我在Chrome或Firefox中看到的。没有选择任何东西时,我看到返回值为0。 – 2016-09-14 14:10:39

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'); 
5

这是一个正常的选择元素是如何工作的:如果没有其他选项选择了第一个选项属性设置。最简单的解决方法是增加一个选项,第一个选项,如:

<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; 
+0

这个选项帮助'$(“#mySelect option:selected”)。index() == 0',在我的特殊情况下$(“#mySelect option:selected”)略有变化。index()<= 0' Beautiful! – Irfan 2016-09-04 14:49:58

0

默认情况下任何选项来对指数浏览器将0视为已选中。对问题的解决办法是在索引0插入伪选项和表单提交之前,你可以使用类似

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

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