HTML SELECT - trigger the ONCHANGE JavaScript event, even if the parameter is not changed

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 the user pulls out the combo box and selects the same option that was previously selected (or does not change the selection at all), JavaScript does not consider this an onchange event. This way jsFunction() not called. But I want jsFunction() call even in this case. How can I achieve this?

Answer 1

I would 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 your label to be the same as the first option, which in this case is 1. Even better: put a shortcut there to select in the field.

Answer 2

You must add an empty option to solve it,

I can also give you another solution, but it is up to you what is right for you or not. Since the user selects the 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); } 

Answer 3

It works:

 <select name="type" onmousedown="this.value='';" onchange="alert('Changed.');"> <option value='1'>One</option> <option value='2'>Two</option> <option value='3'>Three</option> <option value='4'>Four</option> <option value='5'>Five</option> <option value='6'>Six</option> <option value='7'>Seven</option> <option value='8'>Eight</option> <option value='9'>Nine</option> <option value='10'>Ten</option> </select> 

Answer 4

use the onmouseup property with each element of the parameter. it is verbose, but should work. also, depending on what your function actually does, you can arrange things a little differently, assuming that the number is important in the handler:

 <select> <option onmouseup="handler()" value="1">1</option> //get selected element in handler <option onmouseup="handler(2)" value="2">2</option> //explicitly send the value as argument <option onmouseup="handler(this.value)" value="3">3</option> //same as above, but using the element value property and allowing for dynamic option value. you could also send "this.innerHTML" or "this.textContent" to the handler, making option value unnecessary </select> 

Answer 5

JavaScript Code:

• in the mousedown event: set the selectedIndex property to -1
• in change event: handle event

The only drawback is that when the user clicks on the drop-down list, the currently selected item is not displayed selected

Answer 6

Just set the selectIndex associated <select> to -1 as the last step of your processing event.

 mySelect = document.getElementById("idlist"); mySelect.selectedIndex = -1; 

It works every time, removing the highlight and allowing you to select the same (or different) element again.

Answer 7

Try it. Just add an empty option. This will solve your problem.

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

Answer 8

It does not work because the meaning has not "changed." This is the same meaning. Unfortunately, you cannot achieve the desired behavior with the change event.

You can handle the blur event and perform any necessary processing when the user leaves the selection box. That way, you can run the code you need, even if the user selects the same value.

Answer 9

Like this.

1st is empty.

  <option></option> <option>01</option> <option>02</option> <option>03</option> <option>04</option> <option>05</option> <option>06</option> <option>07</option> <option>08</option> <option>09</option> <option>10</option> <option>11</option> <option>12</option>