select
.change
<select id="myoptions">
<option id="one" >Option 1</option>
<option id="two">Option 2</option>
</select>
one
one
$('#myoptions').change(function() {
alert('You selected something!');
}
trigger
Option 1
Option 1
.click
focusout
First you have to explicitly set the first item to a selected
state.
<select id="myoptions">
<option id="one" selected="selected">Option 1</option>
<option id="two">Option 2</option>
</select>
Then in your JavaScript you must explicitly remove the selected
attribute.
$('#myoptions option:selected').removeAttr('selected');
$("#myoptions").on("change", function(){
console.debug($('#myoptions').find('option:selected').val());
});
This will then show a blank/empty drop down box on initialization. Which will allow you to select the first item in the list the first time you click on the dropdown because no option
has the selected
attribute anymore.
This has the benefit of having the look of a blank placeholder selection without actually having to have one and write all the convoluted logic to handle when it gets selected.
CodePen working example of the solution. Be sure and have your JavaScript debug console open before you click on the link or you won't see the desired effect.
This still doesn't solve the reselection issue that so many other people have asked about which is a similar problem, which I would like to use as a refresh mechanism, but I will tackle that in another question.