I'm changing the selectedIndex of select via JS. The problem is that this action doesn't trigger the change or input event. How can I make this work?

let select = document.getElementById("select");
let p = document.getElementsByTagName("p")[0];
let count=0;

select.addEventListener("change",function(e){
let divEl = document.getElementById("textidk");
count++;
divEl.innerHTML="selectedIndex has been changed"+count;

  //something happens after I change selectedIndex in js
});
document.getElementById("btn").addEventListener("click",function(e){
	select.selectedIndex=2;
    p.innerHTML=select.selectedOptions[0].innerHTML;
});

<p></p>
  <select id="select">
    <option value="0">Select car:</option>
    <option value="1">Audi</option>
    <option value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>
    <option value="6">Jaguar</option>
    <option value="7">Land Rover</option>
    <option value="8">Mercedes</option>
    <option value="9">Mini</option>
    <option value="10">Nissan</option>
    <option value="11">Toyota</option>
    <option value="12">Volvo</option>
  </select>
<button id="btn">hello</button>
<div id="textidk"></div>

I'm changing the selectedIndex of select via JS. The problem is that this action doesn't trigger the change or input event. How can I make this work?

let select = document.getElementById("select");
let p = document.getElementsByTagName("p")[0];
let count=0;

select.addEventListener("change",function(e){
let divEl = document.getElementById("textidk");
count++;
divEl.innerHTML="selectedIndex has been changed"+count;

  //something happens after I change selectedIndex in js
});
document.getElementById("btn").addEventListener("click",function(e){
	select.selectedIndex=2;
    p.innerHTML=select.selectedOptions[0].innerHTML;
});

<p></p>
  <select id="select">
    <option value="0">Select car:</option>
    <option value="1">Audi</option>
    <option value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>
    <option value="6">Jaguar</option>
    <option value="7">Land Rover</option>
    <option value="8">Mercedes</option>
    <option value="9">Mini</option>
    <option value="10">Nissan</option>
    <option value="11">Toyota</option>
    <option value="12">Volvo</option>
  </select>
<button id="btn">hello</button>
<div id="textidk"></div>

• javascript
• dom-events

1 Answer 1

You can try to trigger it manually by just calling onchange on your select when you are changing the index. Like this:

select.onchange();

Or you can do:

select.dispatchEvent(new Event('change'));