新手求教：如何实现页面中汽车品牌与车型下拉菜单的联动？

第一步：搭建基础HTML结构 #

先把两个下拉菜单的架子搭好，给它们加id方便后续用JS操作：

<!-- 品牌下拉菜单 -->
<label for="brand-select">选择汽车品牌：</label>
<select id="brand-select">
  <option value="">请选择品牌</option>
  <option value="Mercedes">Mercedes（奔驰）</option>
  <option value="BMW">BMW（宝马）</option>
  <option value="Toyota">Toyota（丰田）</option>
</select>

<!-- 车型下拉菜单 -->
<label for="model-select" style="margin-left: 20px;">选择汽车车型：</label>
<select id="model-select">
  <option value="">请先选择品牌</option>
</select>

第二步：准备品牌-车型对应数据 #

用一个JS对象存储每个品牌对应的车型，结构清晰，新手容易理解：

// 定义品牌和车型的映射关系
const carData = {
  "Mercedes": ["C-Class", "E-Class", "S-Class", "GLC"],
  "BMW": ["3 Series", "5 Series", "X3", "X5"],
  "Toyota": ["Camry", "Corolla", "RAV4", "Land Cruiser"]
};

第三步：编写联动逻辑的JavaScript代码 #

给品牌下拉菜单添加「选择变化」的监听事件，用户切换品牌时自动更新车型下拉内容：

// 获取两个下拉菜单的DOM元素
const brandSelect = document.getElementById('brand-select');
const modelSelect = document.getElementById('model-select');

// 给品牌下拉添加选择变化事件
brandSelect.addEventListener('change', function() {
  // 先清空当前车型下拉的所有旧选项
  modelSelect.innerHTML = '';
  
  // 获取当前选中的品牌值
  const selectedBrand = this.value;
  
  // 如果没选品牌，添加提示选项
  if (!selectedBrand) {
    const option = document.createElement('option');
    option.value = '';
    option.textContent = '请先选择品牌';
    modelSelect.appendChild(option);
    return;
  }
  
  // 从数据里取出对应品牌的车型列表
  const models = carData[selectedBrand];
  
  // 循环把车型逐个添加到下拉菜单中
  models.forEach(model => {
    const option = document.createElement('option');
    option.value = model;
    option.textContent = model;
    modelSelect.appendChild(option);
  });
});

关键步骤拆解 #

• HTML中的id：相当于给每个下拉菜单贴了唯一标识，让JS能精准找到对应的元素。
• 数据对象carData：用品牌名作为「键」，车型数组作为「值」，选完品牌后能直接通过carData[选中品牌]快速拿到对应车型，逻辑简单高效。
• change事件监听：用户切换下拉选项时触发这个事件，相当于通知JS「我换选择了，快更新内容」。
• 清空车型下拉：每次切换品牌都清空旧选项，避免新车型和旧车型混在一起。
• 循环添加选项：用forEach遍历车型数组，逐个创建<option>标签并添加到车型下拉里。

运行方式 #

把上面的HTML和JS代码放到同一个.html文件中，用浏览器打开就能看到效果：

1. 初始状态下，车型下拉显示「请先选择品牌」
2. 选中Mercedes，车型下拉会自动展示奔驰的全部车型
3. 切换到BMW，车型下拉会立刻更新为宝马的车型列表

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