如何根据前一个select框的选择改变后续select框的样式

要实现这个依次高亮下一步选择框的功能，核心是通过监听select的change事件来触发状态切换——当用户完成当前select的选择（选中非默认选项），就自动把下一个select切换为高亮状态。

完整代码示例 #

<style>
.normal {
  border:1px solid black;
}
.selectNext {
  border:4px solid black;
}
</style>

<div>
  1 <select name="answer" id="ans1" class="textSelect selectNext">
    <option value="default"></option>
    <option value="empty" style="font-size:10px;">&#x25EF;</option>
    <option value="full" style="font-size:10px;">&#11044;</option>
  </select>
  <br />

  2 <select name="answer" id="ans2" class="textSelect normal">
    <option value="default"></option>
    <option value="empty" style="font-size:10px;">&#x25EF;</option>
    <option value="full" style="font-size:10px;">&#11044;</option>
  </select>
  <br />

  3 <select name="answer" id="ans3" class="textSelect normal">
    <option value="default"></option>
    <option value="empty" style="font-size:10px;">&#x25EF;</option>
    <option value="full" style="font-size:10px;">&#11044;</option>
  </select>
  <br />

  4 <select name="answer" id="ans4" class="textSelect normal">
    <option value="default"></option>
    <option value="empty" style="font-size:10px;">&#x25EF;</option>
    <option value="full" style="font-size:10px;">&#11044;</option>
  </select>
</div>

<script>
// 获取所有目标select元素
const selects = document.querySelectorAll('select[name="answer"]');

// 为每个select绑定选择变更事件
selects.forEach((select, index) => {
  select.addEventListener('change', function() {
    // 确认用户选中了非默认选项
    if (this.value !== 'default') {
      // 当前select切换为常规边框
      this.classList.remove('selectNext');
      this.classList.add('normal');
      
      // 获取下一个select元素，存在则切换为高亮边框
      const nextSelect = selects[index + 1];
      if (nextSelect) {
        nextSelect.classList.remove('normal');
        nextSelect.classList.add('selectNext');
      }
    }
  });
});
</script>

关键逻辑说明 #

• 事件监听：通过addEventListener给每个select绑定change事件，该事件会在用户切换选项时自动触发。
• 完成选择判断：通过检查当前select的value是否不等于default，确认用户已完成当前步骤的选择。
• 样式切换：使用classList.remove()和classList.add()操作CSS类，实现边框样式的切换。
• 定位下一个选择框：利用querySelectorAll返回的有序元素数组，通过索引直接获取下一个select，无需手动拼接ID，适配任意数量的选择框。

内容的提问来源于stack exchange，提问作者Abi V