'Why doesn't the select drops down?

I am trying to change the contents of a <div> whenever it is hovered. But, while doing this I am encountering a problem that the select is not dropping down. How to correct this? appendChild() method might solve the problem but I am trying to do it only with .innerHTML .

<div id = "navigation" onmouseover = "navigationAnimate()">
Fun
</div>

<script>
function navigationAnimate() {
    navigation.innerHTML = "<select>  <option>Finance</option> <option>Health</option><option>Fun</option><option selected>Maths</option><option>Conveters</option><option>Chronology</option><option>Sciences</option><option>Miscellaneous</option></select>";
}
</script>
javascripthtmldomdom-events


Solution 1:[1]

`Cause everytime you move cursor under #navigation block it change the content . You need to remove attribute "onmouseover" after change the content;

<div id = "navigation" onmouseover = "navigationAnimate()">
Fun
</div>

<script>
function navigationAnimate(){

navigation.innerHTML = "<select>  <option>Finance</option> <option>Health</option><option>Fun</option><option selected>Maths</option><option>Conveters</option><option>Chronology</option><option>Sciences</option><option>Miscellaneous</option></select>";
navigation.removeAttribute('onmouseover');
}

</script>

https://jsfiddle.net/Lz49m7ko/

Solution 2:[2]

Here problem is that you call function onMouseOver event of javascript so it will continuously call the function when your mouse is moving on your div or content.

Here I try to overcome it using condition and modified your existing code. Hope it will work for you. Best of luck.

<div id="navigation" onmouseover="navigationAnimate();">
 Fun
</div>

<script>
var flag = true;
function navigationAnimate(){
 if(flag){
    flag = false;
    navigation.innerHTML = "<select><option>Finance</option> <option>Health</option><option>Fun</option><option selected>Maths</option><option>Conveters</option><option>Chronology</option><option>Sciences</option><option>Miscellaneous</option></select>";
    }
}
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Suleiman
Solution 2 Gautam Patadiya

Related Questions