Create a Dropdown Menu that when clicked displays a div

Question

I'm trying to code a dropdown menu that when a option is clicked, it displays a div with that options name, but I can't figure out how to do just that.

HTML:

<div class="wrapper">
    <div class="menu">
        <select id="type">
            <option value="Gradients">Gradients</option>
            <option value="Custom Color">Custom Color</option>
            <option value="Custom Image/Video">Custom Image/Video</option>
        </select>
    </div>
</div>

<div class="content">
    <div id="Gradients" class="data">
        <h1>gradient</h1>
    </div>
    <div id="Custom Color" class="data">
        <h1>color</h1>
    </div>
    <div id="Custom Image/Video" class="data">
        <h1>image/video</h1>
    </div>
</div>

Answer 1

也许您可以尝试将 style.display 属性设置为阻止

Answer 2

I hope this will help you

 const dropMenu = document.querySelector('#type'), sections = document.querySelectorAll('.data'); dropMenu.addEventListener('change', function handleChange(event) { sections.forEach(section => { section.classList.remove('active'); document.querySelector('#' + event.target.value).classList.add('active'); }); });

 .data { display: none; } .data.active { display: block; }

 <div class="wrapper"> <div class="menu"> <select id="type"> <option value="">--Select--</option> <option value="Gradients">Gradients</option> <option value="Custom-Color">Custom Color</option> <option value="Custom-Image">Custom Image/Video</option> </select> </div> </div> <div class="content"> <div id="Gradients" class="data"> <h1>gradient</h1> </div> <div id="Custom-Color" class="data"> <h1>color</h1> </div> <div id="Custom-Image" class="data"> <h1>image/video</h1> </div> </div>