如何基于多选下拉菜单动态显示关联元素

<div class="form-group">
  <label for="eventSelect">事件名称</label>
  <select id="eventSelect" multiple onchange="updateDisplay()">
    <optgroup label="日期">
      <option value="1">每天</option>
      <option value="2">星期一</option>
      <option value="3">星期二</option>
      <option value="4">星期三</option>
      <option value="5">星期四</option>
      <option value="6">星期五</option>
      <option value="7">星期六</option>
      <option value="8">星期日</option>
    </optgroup>
  </select>
</div>

<!-- 对应的动态显示区域 -->
<div class="form-group" id="hidden_div1" style="display: none;">
  <label>每天</label>
  <input type="text" class="form-control">
</div>
<div class="form-group" id="hidden_div2" style="display: none;">
  <label>星期一</label>
  <input type="text" class="form-control">
</div>
<div class="form-group" id="hidden_div3" style="display: none;">
  <label>星期二</label>
  <input type="text" class="form-control">
</div>
<div class="form-group" id="hidden_div4" style="display: none;">
  <label>星期三</label>
  <input type="text" class="form-control">
</div>
<div class="form-group" id="hidden_div5" style="display: none;">
  <label>星期四</label>
  <input type="text" class="form-control">
</div>
<div class="form-group" id="hidden_div6" style="display: none;">
  <label>星期五</label>
  <input type="text" class="form-control">
</div>
<div class="form-group" id="hidden_div7" style="display: none;">
  <label>星期六</label>
  <input type="text" class="form-control">
</div>
<div class="form-group" id="hidden_div8" style="display: none;">
  <label>星期日</label>
  <input type="text" class="form-control">
</div>

function updateDisplay() {
  const selectElement = document.getElementById("eventSelect");
  // 获取所有被选中的选项的值，返回一个数组
  const selectedValues = Array.from(selectElement.selectedOptions).map(option => option.value);

  // 1. 隐藏所有相关的可显示元素
  // 最佳实践是为所有这些可隐藏/显示的div添加一个共同的类名，例如 'dynamic-div'
  // 这样可以更方便地批量操作。这里我们仍使用ID模式，但进行了优化。
  for (let i = 1; i <= 8; i++) {
    const divId = `hidden_div${i}`;
    const divElement = document.getElementById(divId);
    if (divElement) {
      divElement.style.display = "none";
    }
  }

  // 2. 遍历选中的值，显示对应的元素
  selectedValues.forEach(value => {
    const divId = `hidden_div${value}`;
    const divElement = document.getElementById(divId);
    if (divElement) {
      divElement.style.display = "block";
    }
  });
}

// 页面加载完成后，如果select有默认选中项，也需要调用一次
document.addEventListener('DOMContentLoaded', () => {
    updateDisplay();
});