CODEWITHSUNDEEP
javascriptjqueryselect
craftsman
craftsman

Reputation: 15653

jQuery : How to check if NO option was explicitly selected in a select box

Is it possible to detect if no option was explicitly selected in a select box?

I have tried these methods but none of them works:

<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

Trial 2:

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

Trial 3:

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

Any ideas SO people?

Upvotes: 12

Views: 29440

Answers (5)

Salman Arshad
Salman Arshad

Reputation: 272386

This is how a normal select element works: the first option is selected if no other option has selected attribute set. The simplest workaround is to add an empty option as the first option, like this:

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

then test one of these conditions:

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

Upvotes: 6

VAHUE Production
VAHUE Production

Reputation: 1

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

Upvotes: 0

nickalchemist
nickalchemist

Reputation: 2241

Try This:

<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 your dropdown was selected.

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

​Hope it helps!

PS: You will have to make first value as default value.

Upvotes: 26

anuj_io
anuj_io

Reputation: 2173

By default whatever option comes on index 0 is considered by browser as selected. The solution to problem would be inserting a dummy option at index 0 and before form submission you can validate it using something like

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

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129832

A select box always has a value. If you don't manually change from the default value, you still have a value. For checking for explicit changes, as you say, you could monitor change:

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

Your condition, then, would be:

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

The more common way of achieving something similar would be to insert a placeholder value at the top:

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

... and test for

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

If you need to find out whether the select has been changed from its original value, i.e. the above test, but making sure that the user doesn't switch back to the default, you coul simply store the original value at page load:

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

And check for

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

Upvotes: 3

Related Questions