如何实现二级联动下拉列表：子下拉选项随选中类型动态匹配

实现思路 #

• 提前将Item按所属Type分组存储为JS对象，方便后续快速读取对应Type下的所有选项
• 为Type选择下拉框绑定change事件监听
• 每次Type切换时，同步更新Item下拉框的可选选项，保证展示的选项100%匹配所选Type

方案1：动态生成Item选项（推荐） #

这种方案逻辑最简洁，不会有冗余DOM元素，不会出现逻辑冲突

<!-- HTML部分 -->
<select name="ItemTypeSelector" id="ItemTypeSelector">
  <option value="Type1">Type1</option>
  <option value="Type2">Type2</option>
</select><br>

<select name="ItemSelector" id="ItemSelector"></select><br>

<script>
// 按分组存储所有Item
const itemGroups = {
  Type1: ['Type1Item1', 'Type1Item2', 'Type1Item3'],
  Type2: ['Type2Item1', 'Type2Item2', 'Type2Item3']
}

const typeSelector = document.getElementById('ItemTypeSelector')
const itemSelector = document.getElementById('ItemSelector')

// 定义更新Item下拉选项的函数
function updateItemOptions() {
  const selectedType = typeSelector.value
  // 清空原有选项
  itemSelector.innerHTML = ''
  // 遍历当前Type对应的Item，生成option插入
  itemGroups[selectedType].forEach(item => {
    const option = document.createElement('option')
    option.value = item
    option.textContent = item
    itemSelector.appendChild(option)
  })
}

// 页面初始化时先加载默认Type对应的选项
updateItemOptions()
// 绑定Type切换时的更新事件
typeSelector.addEventListener('change', updateItemOptions)
</script>

方案2：隐藏不匹配的原有选项 #

如果不想修改现有静态Item的DOM结构，可以用这种方案，只需要给每个Item选项加一个标记所属Type的自定义属性即可：
首先修改原Item的HTML代码，给每个option加data-type属性：

<select name="ItemSelector" id="ItemSelector">
  <option value="Type1Item1" data-type="Type1">Type1Item1</option>
  <option value="Type1Item2" data-type="Type1">Type1Item2</option>
  <option value="Type1Item3" data-type="Type1">Type1Item3</option>
  <option value="Type2Item1" data-type="Type2">Type2Item1</option>
  <option value="Type2Item2" data-type="Type2">Type2Item2</option>
  <option value="Type2Item3" data-type="Type2">Type2Item3</option>
</select>

然后添加对应的JS逻辑：

const typeSelector = document.getElementById('ItemTypeSelector')
const itemSelector = document.getElementById('ItemSelector')
const allItemOptions = document.querySelectorAll('#ItemSelector option')

function updateItemOptions() {
  const selectedType = typeSelector.value
  // 隐藏不属于当前Type的选项，显示属于当前Type的选项
  allItemOptions.forEach(option => {
    option.hidden = option.dataset.type !== selectedType
  })
  // 自动选中第一个当前Type下的选项，避免选中已隐藏的无效选项
  itemSelector.value = document.querySelector('#ItemSelector option:not([hidden])').value
}

// 初始化和切换Type时都执行更新
updateItemOptions()
typeSelector.addEventListener('change', updateItemOptions)

两种方案都可以彻底解决跨Type选择Item的逻辑问题。

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