Pure Javascript - Drop Down hover event listener

1

I need to display an image in a div based on the select option the mouse is hovering on within a drop down menu. Here’s what I have so far. It only works for the FIRST option in the select. Any help is appreciated! :slight_smile: BTW it works if the drop down is in “multiple” mode.

JS:

document.getElementById("configuration").addEventListener("mouseover",configurationchange); 
function configurationchange(e){
    var configurationvalue = e.target.value;
    fddisp_image2(configurationvalue); /* this function displays the image in div with innerhtml */
}

HTML:

<select name="configuration" id="configuration">
    <option value="select">Select</option>
    <option value="Square/Rect.">Square/Rectangular</option>
    <option value="Oval">Oval</option>
    <option value="Round">Round</option>
</select>
2

The only way I could get it to work is to use the size attribute on the select list:

<select id="configuration" size="3">
    <option value="Square/Rect.">Square/Rectangular</option>
    <option value="Oval">Oval</option>
    <option value="Round">Round</option>
</select>

It seems that the mouseover event won’t fire on the <option> tag unless they are always showing (at least with FF, I didn’t test with any other browsers).

3

Thanks bbsmooth. That’s the conclusion I’ve come to also. I’ve tried it in 4 browsers and it only works with the size option or multiple option.

Strange. I know this was working a year or 2 ago. Thanks for looking into this.

4

I looked into this a little more and found someone reporting that it stopped working in FF around version 68. So you are right, it did work at one time but most likely just in FF.