本文旨在解决在使用多选下拉菜单时，如何根据用户的选择动态显示相应的HTML元素。我们将分析常见问题，并提供修改后的JavaScript代码，以确保多个选项被选中时，对应的元素都能正确显示，避免先前选择的元素被隐藏。通过本文，你将学会如何处理多选下拉菜单的显示逻辑，提升用户体验。
问题分析
原始代码的问题在于，showDiv() 函数每次执行时，都会遍历所有选项，并根据当前选中的值来显示或隐藏对应的 div。当选择多个选项时，后面的 if...else 语句会覆盖前面的显示结果，导致只有最后一个选中的选项对应的 div 保持显示状态。
解决方案
要解决这个问题，我们需要修改 showDiv() 函数，使其能够根据选中的多个值来显示对应的 div，而不会隐藏之前已经显示的 div。核心思路是移除 else 分支，只处理显示逻辑，而不主动隐藏。
以下是修改后的 JavaScript 代码：
function showDiv() {
const selectElement = document.getElementById("select");
const selectedValues = Array.from(selectElement.selectedOptions).map(option => option.value);
for (let i = 1; i <= 8; i++) {
const divElement = document.getElementById(`hidden_div${i}`);
if (selectedValues.includes(String(i))) {
divElement.style.display = "block";
} else {
divElement.style.display = "none";
}
}
}代码解释：
- 获取选中的值： 首先，获取 select 元素，并使用 Array.from(selectElement.selectedOptions).map(option => option.value) 获取所有选中的 option 的 value 值，存储在 selectedValues 数组中。
- 遍历所有可能的 div： 使用 for 循环遍历 hidden_div1 到 hidden_div8。
- 判断是否显示： 对于每个 div，检查其对应的 value 是否包含在 selectedValues 数组中。如果包含，则将其 display 属性设置为 "block"，否则设置为 "none"。
HTML 代码
以下是 HTML 代码，保持不变：
<div class="form-group">
<label for="FileName">Event Name</label>
<select id="select" multiple onchange="showDiv()">
<optgroup label="Weekdays">
<option value="1">Every Day</option>
<option value="2">Monday</option>
<option value="3">Tuesday</option>
<option value="4">Wednesday</option>
<option value="5">Thursday</option>
<option value="6">Friday</option>
<option value="7">Saturday</option>
<option value="8">Sunday</option>
</optgroup>
</select>
</div>
<!-- Every Day -->
<div class="form-group" id="hidden_div1" style="display: none;">
<label for="FileName">Every Day</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<!-- Monday -->
<div class="form-group" id="hidden_div2" style="display: none;">
<label for="FileName">Monday</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<!-- Tuesday -->
<div class="form-group" id="hidden_div3" style="display: none;">
<label for="FileName">Tuesday</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<!-- Wednesday -->
<div class="form-group" id="hidden_div4" style="display: none;">
<label for="FileName">Wednesday</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<!-- Thursday -->
<div class="form-group" id="hidden_div5" style="display: none;">
<label for="FileName">Thursday</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<!-- Friday -->
<div class="form-group" id="hidden_div6" style="display: none;">
<label for="FileName">Friday</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<!-- Saturday -->
<div class="form-group" id="hidden_div7" style="display: none;">
<label for="FileName">Saturday</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<!-- Sunday -->
<div class="form-group" id="hidden_div8" style="display: none;">
<label for="FileName">Sunday</label>
<input type="text" class="form-control" id="name" name="name">
</div>总结
通过修改 JavaScript 代码，移除了 else 分支，我们实现了根据多选下拉菜单的选中值动态显示对应的 div 元素，而不会影响其他已显示的 div。这种方法可以有效地解决多选下拉菜单的显示问题，提升用户体验。在实际应用中，可以根据需要调整代码，例如，使用更灵活的 data- 属性来关联选项和 div 元素。
