How can I ensure that updating a select with javascript also fires the onchange event listener?

Question

In the HTML DOM, the element object has a number of methods which simulate user interaction with the element.

E.g.

.click()
.focus()
.blur()

If a given element has an onclick event listener attached to it:

myElement.addEventListener('click', myFunction, false);

then that event listener may be triggered, with the javascript:

myElement.click();

But what if the element in question is an <option> in a <select> and the event listener on the <select> is:

mySelect.addEventListener('change', myFunction, false);

How may that event listener be triggered?

Full example:

var boxes = document.getElementsByClassName('box');
var clickBox = boxes[0];
var hoverBoxForClickBox = boxes[1];
var hoverBoxForSelect = boxes[2];

var select = document.getElementsByTagName('select')[0];
var options = select.getElementsByTagName('option');

function updateOption() {

    for (var i = 0; i < options.length; i++) {
        if (options[i].selected === true) {
            options[i].removeAttribute('selected');
        }
    }
    
    options[1].selected = true;
}

clickBox.addEventListener('click', function(){console.log('Clickbox has been clicked');}, false);

hoverBoxForClickBox.addEventListener('mouseover', function(){clickBox.click();}, false);

select.addEventListener('change', function(){console.log(select.value + ' has been selected');}, false);

hoverBoxForSelect.addEventListener('mouseover', updateOption, false);

.box {
display: inline-block;
width: 100px;
height: 100px;
color: rgb(255, 255, 255);
font-weight: bold;
line-height: 100px;
text-align: center;
font-family: arial, helvetica, sans-serif;
cursor: pointer;
}

.clickbox {
background-color: rgb(255, 0, 0);
}

.hoverbox {
background-color: rgb(0, 0, 255);
}

select {
margin-right: 36px;
}

<div class="box clickbox">Click Me</div>
<div class="box hoverbox">Hover Me</div>

<select>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
<option value="option-4">Option 4</option>
<option value="option-5">Option 5</option>
</select>

<div class="box hoverbox">Hover Me</div>

You can see that when the second hoverbox is hovered over, the <option> always changes back to Option 2, but... the event listener does not fire.

That might be what you are looking for: https://stackoverflow.com/questions/3996616/javascript-manually-firing-onchange-event#3996800 — Stefan Dochow, Dec 16 '17 at 19:56
_(Thank you, but... the question you link to is not very closely related to the question above)._ — Rounin, Dec 16 '17 at 20:29
I get that now. Have a look at my answer. It is quite a pragmatic approach but does the job. — Stefan Dochow, Dec 16 '17 at 20:50

score 1 · Accepted Answer · answered Dec 16 '17 at 20:49

1

Why not get rid of the anonymous function and use a good old named one?

https://jsfiddle.net/4terzna8/

Snippet:

function onChangeSelect(){
    console.log(select.value + ' has been selected');
}

function updateOption() {
 for (var i = 0; i < options.length; i++) {
    if (options[i].selected === true) {
        options[i].removeAttribute('selected');
    }
 }

 options[1].selected = true;

 onChangeSelect();
}
select.addEventListener('change', onChangeSelect, false);

answered Dec 16 '17 at 20:49

Stefan Dochow

1,454
1
10
11

Any hover would now trigger a `option-2 has been selected` message. Even if there was no change, because option 2 had been selected before. In case that is an issue you would have to check the current value before updating it and only call `onChangeSelect()` in case an actual change did take place. – Stefan Dochow Dec 16 '17 at 20:53
Yes, that makes perfect sense - if the event listener cannot "hear" the javascript-initiated `change` event, then separately calling a named function is the sensible alternative. Thank you. – Rounin Dec 17 '17 at 00:18

How can I ensure that updating a select with javascript also fires the onchange event listener?

1 Answers1