如何使用jQuery基于另一个下拉选择框切换显示对应选择框

没问题，我来帮你搞定这个下拉框切换显示的需求～用简单的JavaScript配合一点点CSS就能实现，下面是完整的可运行代码示例：

<select id="myclass">
  <option value="one">Form one</option>
  <option value="two">Form two</option>
</select>

<!-- 需要切换显示的两个子选择框 -->
<select id="one">
  <option value="one1">one1</option>
  <option value="one2">one2</option>
</select>
<select id="two">
  <option value="two1">two1</option>
  <option value="two2">two2</option>
</select>

<style>
/* 初始状态下隐藏两个子选择框，避免页面加载时同时显示 */
#one, #two {
  display: none;
}
</style>

<script>
// 获取页面上的三个选择框元素
const mainSelect = document.getElementById('myclass');
const selectOne = document.getElementById('one');
const selectTwo = document.getElementById('two');

// 定义核心的切换显示逻辑函数
function toggleSelects(selectedValue) {
  if (selectedValue === 'one') {
    selectOne.style.display = 'block'; // 显示id为one的选择框
    selectTwo.style.display = 'none';  // 隐藏id为two的选择框
  } else if (selectedValue === 'two') {
    selectOne.style.display = 'none';  // 隐藏id为one的选择框
    selectTwo.style.display = 'block'; // 显示id为two的选择框
  }
}

// 页面加载完成后，根据主选择框的默认选项显示对应子选择框
window.addEventListener('DOMContentLoaded', () => {
  toggleSelects(mainSelect.value);
});

// 监听主选择框的选项变化事件，实时切换显示
mainSelect.addEventListener('change', (e) => {
  toggleSelects(e.target.value);
});
</script>

逻辑说明 #

1. 初始样式控制：用CSS把两个子选择框初始设置为display: none，这样页面刚加载时不会同时看到两个选择框。
2. 页面初始化处理：当页面完全加载后，根据主选择框的默认选中值（这里默认是one），自动显示对应的子选择框。
3. 实时切换逻辑：给主选择框绑定change事件，每次用户切换选项时，就根据选中的value值，显示对应的子选择框并隐藏另一个。

如果之后需要扩展更多子选择框，也可以把逻辑优化得更通用（比如通过遍历选择框元素来控制），但针对你当前的需求，上面的代码已经足够清晰好用啦～

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