On select change always display first disabled option

Question

I have simple select with several options:

<select id = "actionslist">
    <option id="selectoption" disabled selected>Select</option>
    <option value = "Remove Plans">Remove Plans</option>
     <option value = "Something else">Something Else</option>
</select>

My question is, when I click Remove Plans, my onchange event is kicked off, and I see it in the select window, rather than first disabled selected option Select. How can I ALWAYS keep Select in the select window and let user re-pick whatever option they want without actually "selecting" it and showing in the select window.

 $('#actionslist').bind("change", function () {
            var item = $(this).val();
            if (item === "Remove Plans")
            {
              //do something
            }
        });

Again, I want "Select" always to show, NOT the option that user clicks on. Yet, I don't want Select to be one of the options that user can click on.

idea here is to make sure that onchange event is kicked in at all times, even if user keeps selecting same option over and over.

ThankS!

Answer 1

You could just reset it during the on change event. $(this).prop('selectedIndex',0) . However, you would now have to reference on the value (basically storing it in a variable). The select element will now have the original value.

 $( "#actionslist" ).bind( "change", function() { console.log(this.value) if (this.value === "Remove Plans") { //do something } $(this).prop('selectedIndex',0); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id = "actionslist"> <option id="selectoption" disabled selected>Select</option> <option value = "Remove Plans">Remove Plans</option> <option value = "Something else">Something Else</option> </select> 

Answer 2

This can be done easily – simple add this.selectedIndex = 0; at the end of your change function

 $('#actionslist').bind("change", function () { var item = $(this).val(); console.log(item) if (item === "Remove Plans") { //do something } this.selectedIndex = 0; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id = "actionslist"> <option id="selectoption" disabled selected>Select</option> <option value = "Remove Plans">Remove Plans</option> <option value = "Something else">Something Else</option> </select> 

Answer 3

Well creating an unclickable select box that overlay the actual select box is one of the (quick, dirty) solution. You will have to take care to make sure they overlap though:

 $('#fakeActionslist').bind("change", function() { $('#actionslist').val($(this).val()); $(this).val(''); alert($('#actionslist').val()); // User's latest choice is saved in $('#actionslist').val() }); 

 .select-container { position: relative; } #fakeActionslist { z-index: 1; position: absolute; left: 0; top: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="select-container"> <select id="actionslist"> <option value="" disabled selected>Select</option> <option value="Remove Plans">Remove Plans</option> <option value="Something else">Something Else</option> </select> <select id="fakeActionslist"> <option value="" disabled selected>Select</option> <option value="Remove Plans">Remove Plans</option> <option value="Something else">Something Else</option> </select> </div>