show hide dropdown menu on select change-CodePudding

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.

CodePudding user response：

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" >
    <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!