How to fire a change event on a HTMLSelectElement if the new value is the same as the old?

Question

I have the following markup:

<select onchange="jsFunction()">     <option value="1">1</option>     <option value="2">2</option>     <option value="3">3</option> </select> 

When a user pulls down the combobox and selects the same option that was previously selected (or doesn't change the selection at all), JavaScript doesn't regard it as an onchange event. So, the jsFunction() is not called. But I want the jsFunction() called even in this case. How can I achieve this?

Answer 1

I'd do it like this:

<select onchange="jsFunction()">   <option value="" disabled selected style="display:none;">Label</option>   <option value="1">1</option>   <option value="2">2</option>   <option value="3">3</option> </select> 

If you want you could have the same label as the first option, which in this case is 1. Even better: put a label in there for the choices in the box.

Answer 2

You have to add empty option to solve it,

I also can give you one more solution but its up to you that is fine for you or not Because User select default option after selecting other options than jsFunction will be called twice.

<select onChange="jsFunction()" id="selectOpt">     <option value="1" onclick="jsFunction()">1</option>     <option value="2">2</option>     <option value="3">3</option> </select>  function jsFunction(){   var myselect = document.getElementById("selectOpt");   alert(myselect.options[myselect.selectedIndex].value); }