'show hide dropdown menu on select change

I have a css code for a navigation menu bar that I just copied.

.sub-header .sub-header-container-menu > li:hover .sub-header-hover-container { 

    display: block; 
}

I'm trying to disable the dropdown or enable it base on the value of my Select object onChange action.

Let's say value is 1:

document.getElementById('sub-header-hover-container').style.display="block";

Let's say value is 2:

document.getElementById('sub-header-hover-container').style.display="none";

But it's not working...

Any ideas will be greatly appreciated.

javascripthtmljquerycss


Solution 1:[1]

function getValue(selectObject) {
    if (selectObject.value == 1){
        document.getElementById('navBar').style.display="block";
    } else if (selectObject.value == 2){
        document.getElementById('navBar').style.display="none";
    }
}
.sub-header .sub-header-container-menu > li:hover .sub-header-hover-container{
    display: block;
}
<select id="selectValue" onchange="getValue(this)">
    <option value="1" selected>Show</option>
    <option value="2">Hide</option>
</select>
<nav id="navBar" class="sub-header">
    <ul>
        <li>Hi</li>
        <li>Hi</li>
    </ul>
</nav>

You have used "getElementById" with classes. Add an id attribute to the nav bar and set a value to it. Then change the id of "getElementById" to the nav bar's id.

Thanks and best regards!

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

Related Questions