如何实现两个相互依赖的<select>下拉框（非级联选择）

我完全懂你的痛点——这不是普通的级联选择，而是两个选择框互相约束，之前每次重置选项列表都会把用户原本有效的选中状态给清掉，确实很闹心。下面给你两个更靠谱的实现思路：

思路一：动态禁用无效选项（首推） #

比起粗暴重置整个选项列表，更优雅的方式是保留所有选项，但动态把不符合条件的选项设为禁用状态。这样既不会弄丢用户之前选的有效值，还能让用户直观看到哪些选项不能选。

修改后的代码示例：

function updateToOptions() {
  const fromSelect = document.getElementById("from");
  const toSelect = document.getElementById("to");
  const selectedFrom = parseInt(fromSelect.value);
  
  // 遍历to的所有选项，根据from的值判断是否禁用
  Array.from(toSelect.options).forEach(option => {
    const optionValue = parseInt(option.value);
    option.disabled = optionValue < selectedFrom;
  });
  
  // 如果当前选中的to值小于from，自动切换到最小有效值
  if (parseInt(toSelect.value) < selectedFrom) {
    toSelect.value = selectedFrom;
  }
}

function updateFromOptions() {
  const fromSelect = document.getElementById("from");
  const toSelect = document.getElementById("to");
  const selectedTo = parseInt(toSelect.value);
  
  // 遍历from的所有选项，根据to的值判断是否禁用
  Array.from(fromSelect.options).forEach(option => {
    const optionValue = parseInt(option.value);
    option.disabled = optionValue > selectedTo;
  });
  
  // 如果当前选中的from值大于to，自动切换到最大有效值
  if (parseInt(fromSelect.value) > selectedTo) {
    fromSelect.value = selectedTo;
  }
}

对应的HTML：

<h3>FROM:</h3>
<select id="from" onchange="updateToOptions()">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
</select>
<h3>TO:</h3>
<select id="to" onchange="updateFromOptions()">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
</select>

这个方案的优势：

• 完美解决你说的场景：先选from=3、to=5，再把from改回2，to的5会保持选中状态
• 用户能看到完整的选项范围，无效选项只是变灰不可选，体验更清晰
• 不用频繁操作innerHTML重置DOM，逻辑更稳定

思路二：手动恢复有效选中值（如果坚持重置选项） #

要是你还是想保留重置选项列表的方式，那得在更新前先记录当前选中值，更新后判断这个值是否在新的有效范围内，要是有效就把它恢复成选中状态：

function updateTo(e) {
  const toSelect = document.getElementById("to");
  const currentToValue = toSelect.value; // 先记下当前选中值
  const minTo = parseInt(e.value);
  updateSelect(toSelect, minTo, 6, currentToValue);
}

function updateFrom(e) {
  const fromSelect = document.getElementById("from");
  const currentFromValue = fromSelect.value; // 先记下当前选中值
  const maxFrom = parseInt(e.value);
  updateSelect(fromSelect, 1, maxFrom, currentFromValue);
}

function updateSelect(elmnt, beginValue, endValue, originalValue) {
  let selections = "";
  // 判断原选中值是否在新的有效范围内
  const isOriginalValid = parseInt(originalValue) >= beginValue && parseInt(originalValue) <= endValue;
  
  // 生成选项时，若原有效值存在就给它加selected属性
  for (let i = beginValue; i <= endValue; i++) {
    const selectedAttr = isOriginalValid && i == originalValue ? "selected" : "";
    selections += `<option ${selectedAttr}>${i}</option>`;
  }
  elmnt.innerHTML = selections;
}

这个方案能解决状态丢失问题，但用户看不到完整的选项范围，体验不如第一种。另外提个小建议：尽量用let/const代替var，这是现代JS的最佳实践，能避免不少潜在问题~

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