Create a Dropdown Menu that when clicked displays a div

Issue

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

    <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>
</body>```

Solution

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>

Answered By - Mohamad