js实现多个下拉菜单

实现多个下拉菜单的HTML结构

使用HTML的<select>和<option>标签创建多个下拉菜单的基本结构。每个下拉菜单需要独立的id或class以便JavaScript操作。

<select id="dropdown1">
  <option value="">请选择</option>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
</select>

<select id="dropdown2">
  <option value="">请选择</option>
  <option value="optionA">选项A</option>
  <option value="optionB">选项B</option>
</select>

使用JavaScript动态控制下拉菜单

通过事件监听实现下拉菜单的联动效果。例如当第一个下拉菜单选择后，第二个下拉菜单的选项会相应变化。

document.getElementById('dropdown1').addEventListener('change', function() {
  const dropdown2 = document.getElementById('dropdown2');
  dropdown2.innerHTML = '<option value="">请选择</option>';

  if (this.value === 'option1') {
    dropdown2.innerHTML += '<option value="optionX">选项X</option>';
    dropdown2.innerHTML += '<option value="optionY">选项Y</option>';
  } else if (this.value === 'option2') {
    dropdown2.innerHTML += '<option value="optionM">选项M</option>';
    dropdown2.innerHTML += '<option value="optionN">选项N</option>';
  }
});

使用jQuery简化操作

如果项目中已引入jQuery库，可以用更简洁的语法实现相同功能。

$('#dropdown1').change(function() {
  $('#dropdown2').empty().append('<option value="">请选择</option>');

  if ($(this).val() === 'option1') {
    $('#dropdown2').append('<option value="optionX">选项X</option>')
                  .append('<option value="optionY">选项Y</option>');
  } else if ($(this).val() === 'option2') {
    $('#dropdown2').append('<option value="optionM">选项M</option>')
                  .append('<option value="optionN">选项N</option>');
  }
});

实现多级联动下拉菜单

对于三级或更多级联动的下拉菜单，可以使用对象或数组存储所有选项数据，然后根据前一级的选择动态生成下一级选项。

const menuData = {
  'option1': ['选项X', '选项Y'],
  'option2': ['选项M', '选项N']
};

document.getElementById('dropdown1').addEventListener('change', function() {
  const dropdown2 = document.getElementById('dropdown2');
  dropdown2.innerHTML = '<option value="">请选择</option>';

  if (this.value && menuData[this.value]) {
    menuData[this.value].forEach(item => {
      dropdown2.innerHTML += `<option value="${item}">${item}</option>`;
    });
  }
});

使用现代框架实现下拉菜单

在Vue或React等现代前端框架中，可以利用数据绑定特性更高效地实现动态下拉菜单。

Vue示例：

<template>
  <select v-model="selectedOption1" @change="updateOptions2">
    <option value="">请选择</option>
    <option v-for="option in options1" :value="option.value">{{ option.text }}</option>
  </select>

  <select v-model="selectedOption2">
    <option value="">请选择</option>
    <option v-for="option in options2" :value="option.value">{{ option.text }}</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      options1: [
        { value: 'option1', text: '选项1' },
        { value: 'option2', text: '选项2' }
      ],
      options2: [],
      selectedOption1: '',
      selectedOption2: ''
    }
  },
  methods: {
    updateOptions2() {
      this.options2 = this.selectedOption1 === 'option1' ? 
        [{ value: 'optionX', text: '选项X' }, { value: 'optionY', text: '选项Y' }] :
        [{ value: 'optionM', text: '选项M' }, { value: 'optionN', text: '选项N' }];
    }
  }
}
</script>