我的 html 表单中有一个带有下拉列表的字段。它包含两种可能性,我想让以下字段(第一个块或第二个块)根据选择出现或消失,我找到了单选按钮但没有找到下拉列表......你能帮我做这个吗在 JavaScript 中?
非常感谢
代码 html :
<div class="col-md-2">
<select class="form-select text-secondary mt-4" id="autoSizingSelect" name="service">
<option value="midi" data-id="#midi">Midi</option>
<option value="soir" data-id="#soir">Soir</option>
</select>
</div>
// First block
<p class="text-secondary text-center mt-5">Heure midi</p>
<div class="col-md-4">
<select class="form-select text-secondary" id="midi" name="heure_midi">
<option value=""></option>
<option value=" 12:00">12:00</option>
<option value="12:15">12:15</option>
<option value="12:30">12:30</option>
<option value="12:45">12:45</option>
<option value="13:00">13:00</option>
<option value="13:15">13:15</option>
<option value="13:30">13:30</option>
<option value="13:45">13:45</option>
<option value="14:00">14:00</option>
</select>
</div>
//Second block
<p class="text-secondary text-center mt-4">Heure soir</p>
<div class="col-md-4">
<select class="form-select text-secondary" id="soir" name="heure_soir">
<option value=""></option>
<option value="19:00">19:00</option>
<option value="19:15">19:15</option>
<option value="19:30">19:30</option>
<option value="19:45">19:45</option>
<option value="19:00">20:00</option>
<option value="20:15">20:15</option>
<option value="20:30">20:30</option>
<option value="20:45">20:45</option>
<option value="21:00">21:00</option>
</select>
</div>
您可以将
document.querySelectorAll
和 classList.toggle
与 onchange
的 select
事件结合使用以实现此目的,并使用预定义的 .hidden
类。
请参阅代码片段示例。
function handleChange(event){
document.querySelectorAll('.container').forEach((form)=>{
form.classList.toggle('hidden');
})
}
.hidden {
display: none;
}
<h1 id="header"></h1>
<div class="col-md-2">
<select class="form-select text-secondary mt-4" id="autoSizingSelect" name="service" onchange="handleChange(this)">
<option value="midi" data-id="#midi">Midi</option>
<option value="soir" data-id="#soir">Soir</option>
</select>
</div>
<div class="text-secondary text-center mt-5 container">
<p class="col-md-4">
<span>Heure midi</span>
<select class="form-select text-secondary" id="midi" name="heure_midi">
<option value=""></option>
<option value="12:00">12:00</option>
<option value="12:15">12:15</option>
<option value="12:30">12:30</option>
<option value="12:45">12:45</option>
<option value="13:00">13:00</option>
<option value="13:15">13:15</option>
<option value="13:30">13:30</option>
<option value="13:45">13:45</option>
<option value="14:00">14:00</option>
</select>
</p>
</div>
<div class="text-secondary text-center mt-4 container hidden">
<p class="col-md-4">
<span>Heure soir</span>
<select class="form-select text-secondary" id="soir" name="heure_soir">
<option value=""></option>
<option value="19:00">19:00</option>
<option value="19:15">19:15</option>
<option value="19:30">19:30</option>
<option value="19:45">19:45</option>
<option value="19:00">20:00</option>
<option value="20:15">20:15</option>
<option value="20:30">20:30</option>
<option value="20:45">20:45</option>
<option value="21:00">21:00</option>
</select>
</p>
</div>
谢谢,但是您的代码仅适用于单个标签,并没有像我希望的那样使用整个块进行选择...
我试过了,但没用……你能帮帮我吗?
function handleChange(onclick){
if (onclick == "midi"){
document.getElementById('midi').style.display="block";
}else{
document.getElementById('midi').style.display="none";
}
}
handleChange('soir');
<div class="col-md-2">
<select class="form-select text-secondary mt-4" id="autoSizingSelect" name="service">
<option value="midi" data-id="#midi" onclick="handleChange('midi')">Midi</option>
<option value="soir" data-id="#soir">Soir</option>
</select>
</div>
<p class=" text-secondary text-center mt-5">Heure midi</p>
<div class="col-md-4 ">
<select class="form-select text-secondary " type="hidden" id="midi" name="heure_midi">
<option value=""></option>
<option value=" 12:00">12:00</option>
<option value="12:15">12:15</option>
<option value="12:30">12:30</option>
<option value="12:45">12:45</option>
<option value="13:00">13:00</option>
<option value="13:15">13:15</option>
<option value="13:30">13:30</option>
<option value="13:45">13:45</option>
<option value="14:00">14:00</option>
</select>
</div>
<p class="text-secondary text-center mt-4">Heure soir</p>
<div class="col-md-4 ">
<select class="form-select text-secondary" type="hidden" id="soir" name="heure_soir">
<option value=""></option>
<option value="19:00">19:00</option>
<option value="19:15">19:15</option>
<option value="19:30">19:30</option>
<option value="19:45">19:45</option>
<option value="19:00">20:00</option>
<option value="20:15">20:15</option>
<option value="20:30">20:30</option>
<option value="20:45">20:45</option>
<option value="21:00">21:00</option>
</select>
</div>