js实现多个下拉菜单

实现多个下拉菜单的JavaScript方法

使用HTML和CSS创建基础结构

<select class="dropdown">
  <option value="">选择选项1</option>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
</select>

<select class="dropdown">
  <option value="">选择选项2</option>
  <option value="a">选项A</option>
  <option value="b">选项B</option>
</select>

.dropdown {
  padding: 8px;
  margin: 5px;
  border-radius: 4px;
  min-width: 120px;
}

通过DOM操作动态添加下拉菜单

function createDropdown(options, parentId) {
  const select = document.createElement('select');
  options.forEach(opt => {
    const option = document.createElement('option');
    option.value = opt.value;
    option.textContent = opt.text;
    select.appendChild(option);
  });
  document.getElementById(parentId).appendChild(select);
}

// 调用示例
createDropdown([
  {value: 'x', text: '选项X'},
  {value: 'y', text: '选项Y'}
], 'container');

使用事件委托管理多个下拉菜单

document.addEventListener('change', function(e) {
  if (e.target.tagName === 'SELECT') {
    console.log('选中的值:', e.target.value);
    // 可在此添加联动逻辑
  }
});

实现下拉菜单联动效果

const firstDropdown = document.querySelector('#firstDropdown');
const secondDropdown = document.querySelector('#secondDropdown');

firstDropdown.addEventListener('change', function() {
  secondDropdown.innerHTML = '';
  const options = getOptionsBasedOnFirst(this.value);
  options.forEach(opt => {
    const option = new Option(opt.text, opt.value);
    secondDropdown.add(option);
  });
});

function getOptionsBasedOnFirst(selectedValue) {
  // 返回基于第一个下拉菜单选择的选项数组
  return [...]; // 你的逻辑数据
}

使用框架简化实现（Vue示例）

new Vue({
  el: '#app',
  data: {
    selects: [
      { options: [{text:'A',value:'a'}] },
      { options: [{text:'B',value:'b'}] }
    ]
  },
  methods: {
    updateOptions(index) {
      // 联动更新逻辑
    }
  }
});

响应式设计考虑

为下拉菜单添加媒体查询确保移动端友好：

@media (max-width: 600px) {
  .dropdown {
    width: 100%;
    margin: 5px 0;
  }
}

以上方法可根据实际需求组合使用，纯JavaScript实现适用于简单场景，框架实现更适合复杂交互系统。动态创建方式便于批量生成菜单，事件委托能高效管理多个菜单事件。