如何在HTML中根据一个select选项控制另一个select的选项？

这是个很常见的联动下拉需求，我给你整理了一个简洁的实现方案，直接就能用：

完整实现代码 #

HTML 部分 #

先给两个下拉框加上唯一ID，方便后续JS操作：

<!-- 第一个下拉框 -->
<select class="form-control" name='start' id="startSelect">
  <option selected disabled hidden value="">start</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
</select>

<!-- 第二个下拉框 -->
<select class="form-control" name='end' id="endSelect">
  <option selected disabled hidden value="">end</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
</select>

JavaScript 部分 #

// 获取两个下拉框的DOM元素
const startSelect = document.getElementById('startSelect');
const endSelect = document.getElementById('endSelect');

// 定义联动逻辑函数
function syncEndOptions() {
  // 把选中值转成数字类型
  const selectedNum = parseInt(startSelect.value);
  
  // 遍历第二个下拉框的所有选项
  for (const option of endSelect.options) {
    // 跳过提示用的空值选项，避免隐藏它
    if (option.value === "") continue;
    
    // 对比选项数值和选中值，决定显示/隐藏
    const optionNum = parseInt(option.text);
    option.style.display = optionNum <= selectedNum ? 'none' : 'block';
  }
  
  // 重置第二个下拉框的选中状态，回到提示选项
  endSelect.selectedIndex = 0;
}

// 给第一个下拉框绑定change事件，触发联动
startSelect.addEventListener('change', syncEndOptions);

逻辑说明 #

• 首先通过ID获取两个下拉框节点，确保能精准操作元素
• 当第一个下拉框的选中值变化时，自动触发联动函数
• 函数内部会跳过提示用的空选项，只处理1-11的数值选项：对比每个选项的数值和选中值，小于等于选中值的直接隐藏，其余正常显示
• 最后重置第二个下拉框的选中状态，避免用户看到已隐藏的选项还处于选中状态

这样就完美实现你要的效果啦——比如第一个下拉框选5，第二个就只显示6到11的选项；选3的话就只显示4到11，完全符合需求。

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