JQuery: how to check if option NO was selected in the select box

Question

Is it possible to determine whether an option has been explicitly selected?

I tried these methods, but none of them work:

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

Trial 1:

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

Test 2:

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

Test 3:

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

Any ideas SO people?

Answer 1

Try the following:

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

Use this JS:

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

It will check if a dropdown menu has been selected.

Try this script: http://jsfiddle.net/aPYyt/

Hope this helps!

PS: you need to make the first value as the default value.

Answer 2

This is how the normal select element works: the first parameter is selected if another parameter does not have the selected attribute. The simplest workaround is to add an empty option as the first option, for example:

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

In jQuery, you can check one of the following conditions:

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

Answer 3

There is always a value in the selection box. If you do not manually change the default value, you still have the value. To check for explicit changes, as you say, you can track change :

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

So your condition:

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

A more common way to achieve something like this would be to insert a placeholder value at the top:

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

... and check

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

If you need to find out if the selection was changed from its original value, i.e. the test described above, but make sure that the user does not switch to the default value, you just save the original value when loading the page

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

And check

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

Answer 4

By default, any parameter in index 0 is considered the selected browser. The solution to the problem is to insert a dummy option at index 0 and before submitting the form, you can check it using something like

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

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