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    lt select onchange  jsFunction    gt       lt option value  1  gt 1 lt  option gt       lt option value  2  gt 2 lt  option gt       lt option value  3  gt 3 lt  option gt   lt  select gt    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

User · Answer

Just set the selectIndex of the associated  lt select gt  tag 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

User · Answer

It s not firing because the value hasn t  changed   It s the same value  Unfortunately  you can t achieve the desired behaviour using the change event    You can handle the blur event and do whatever processing you need when the user leaves the select box  That way you can run the code you need even if the user selects the same value

User · Answer

Try this  Just add an empty option  This will solve your problem    lt select onchange  jsFunction    gt       lt option gt  lt  option gt       lt option value  1  gt 1 lt  option gt       lt option value  2  gt 2 lt  option gt       lt option value  3  gt 3 lt  option gt   lt  select gt

User · Answer

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    lt select onChange  jsFunction    id  selectOpt  gt       lt option value  1  onclick  jsFunction    gt 1 lt  option gt       lt option value  2  gt 2 lt  option gt       lt option value  3  gt 3 lt  option gt   lt  select gt   function jsFunction      var myselect   document getElementById  selectOpt      alert myselect options myselect selectedIndex  value

User · Answer

I d do it like this    lt select onchange  jsFunction    gt     lt option value    disabled selected style  display none   gt Label lt  option gt     lt option value  1  gt 1 lt  option gt     lt option value  2  gt 2 lt  option gt     lt option value  3  gt 3 lt  option gt   lt  select gt    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

User · Answer

use the  onmouseup  property with each option element  it s verbose  but should work  also  depending on what your function is actually doing  you could arrange things a little differently  assuming the number is important in the handler    lt select gt   lt option onmouseup  handler    value  1  gt 1 lt  option gt     get selected element in handler  lt option onmouseup  handler 2   value  2  gt 2 lt  option gt     explicitly send the value as argument  lt option onmouseup  handler this value   value  3  gt 3 lt  option gt    same as above  but using the element s value property and allowing for dynamic option value  you could also send  this innerHTML  or  this textContent  to the handler  making option value unnecessary  lt  select gt

User · Answer

For this problem  I have finally put a new  lt i gt  tag to refresh the select instead  Don t try to trigger an event if the selected option is the same that the one already selected      If user click on the  refresh  button  I trigger the onchange event of my select with    const refreshEquipeEl   document getElementById  refreshEquipe1     function onClickRefreshEquipe event       let event2   new Event  change        equipesSelectEl dispatchEvent event2     refreshEquipeEl onclick   onClickRefreshEquipe    This way  I don t need to try select the same option in my select

User · Answer

JavaScript code    on mousedown event  set selectedIndex property value to -1 on change event  handle event   The only drawback is that when the user clicks on the dropdown list  the currently selected item does not appear selected

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

Examples related to javascript

Examples related to dom-events

Examples related to html-select

Examples related to onchange