创建一个下拉菜单，当点击时显示div

Question

我正在尝试编写一个下拉菜单，当一个选项被点击时，它会显示一个div与该选项名称，但我不知道如何做到这一点。

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

也许你可以试着设置一下样式。显示块属性

Answer 2

希望这对你有帮助

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>