Onmouseover / onchange with <select>

Question

<select>
<option value="uk">UK</option>
<option value="us">US</option>
<option value="ch">China</option>
</select>
when user puts his mouse over any of the above country, a submenu should appear containing 3 cities of that country (it must be done via "onmouseover" / "onchange" events) and i have no idea how to do that. How to do that?

Answer 1

Then I guess you have to put onmouseover which will run a js code for changing the look.
Make like a list of options and add "display=none" and when mouse moves over change it to "display=inline".
I'm sorry if you don't understand it and I can't show you on an example right now. I will ask someone else to help you.

Answer 2

as HTML attribute: onmouseover="myFunction()" js: function myFunction() { document.[targetselectsubclassorid].style.display = "show". Make sure each class or id is hidden by default and only targeted under the conditions you want.

Answer 3

onmouseover is a pain to work with so I'd use onchange. Once the country is selected, you get called. Here is an example of that.
https://code.sololearn.com/W16sY9vEuIk3

The displaying your cities is a different matter. I've never done it. However, I would start with this alert and modify it so it only shows onmouseover.
https://code.sololearn.com/WaB2vCB0urR1

Answer 4

Some info here: https://www.w3schools.com/jsref/dom_obj_style.asp

Answer 5

This might be close. I don't have access to my laptop to test it, but works okay on my phone.
https://code.sololearn.com/WTtQhNL5S1nW

Answer 6

@John Wells the solution seems good, but does it need that many lines?

Answer 7

Here's an example for a dropdown menu.
https://code.sololearn.com/W5qaHpzq0cBi/?ref=app
If you also want to display cities just a div where cities will display.

Answer 8

Most likely not. I haven't spent time to understand Calvin's code as yet, but I'm sure things can be removed.

Answer 9

I would like to get it done via
<select>
<option value="uk">UK</option>
<option value="us">US</option>
<option value="ch">China</option>
</select>
when user puts his mouse over any of the above country, a submenu should appear containing 3 cities of that country (it must be done via "onmouseover" / "onchange" events).