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

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.

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

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;