根据下拉选择值显示对应元素的实现咨询

我来帮你搞定这个联动显示的问题！核心是要监听两个下拉框的选择变化，然后根据组合条件来控制对应Div的显示状态。咱们一步步来修改代码：

1. 先理清逻辑规则 #

你需要的规则可以整理为：

• 当选择分类C + Juice → 显示.menu-1，隐藏其他菜单
• 当选择分类A + Tea → 显示.menu-2，隐藏.menu-1
• 其他未匹配的情况 → 隐藏所有菜单（可根据需求调整）

2. 修复并完善代码 #

调整HTML结构 #

给第二个下拉框添加change事件监听，同时补上.menu-2元素：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="meal" id="meal" onChange="changecat(this.value); updateMenuDisplay();">
  <option value="" disabled selected>Select</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>
<select name="category" id="category" onChange="updateMenuDisplay();">
  <option value="" disabled selected>Select</option>
</select>
<div class="menu-1">menu 1</div>
<div class="menu-2" style="display:none;">menu 2</div>

修改CSS #

给两个菜单初始都设为隐藏：

.menu-1, .menu-2 { display: none; }

完善JavaScript逻辑 #

新增updateMenuDisplay函数，用来获取两个下拉框的选中值，再根据规则控制显示：

var mealsByCategory = {
  A: ["Soup", "Juice", "Tea", "Others"],
  B: ["Soup", "Juice", "Water", "Others"],
  C: ["Soup", "Juice", "Coffee", "Tea", "Others"]
}

function changecat(value) {
  if (value.length == 0) {
    document.getElementById("category").innerHTML = "<option></option>";
  } else {
    var catOptions = "<option value='' disabled selected>Select</option>"; // 补全默认提示选项
    for (var categoryId in mealsByCategory[value]) {
      catOptions += "<option value='" + mealsByCategory[value][categoryId] + "'>" + mealsByCategory[value][categoryId] + "</option>";
    }
    document.getElementById("category").innerHTML = catOptions;
  }
}

// 新增的菜单显示控制函数
function updateMenuDisplay() {
  var selectedMeal = document.getElementById('meal').value;
  var selectedCategory = document.getElementById('category').value;
  
  // 先隐藏所有菜单，避免状态混乱
  $('.menu-1, .menu-2').hide();
  
  // 根据组合条件显示对应菜单
  if (selectedMeal === 'C' && selectedCategory === 'Juice') {
    $('.menu-1').show();
  } else if (selectedMeal === 'A' && selectedCategory === 'Tea') {
    $('.menu-2').show();
  }
}

3. 关键细节说明 #

• 获取选中值：通过document.getElementById('meal').value和document.getElementById('category').value分别拿到两个下拉框的选中值，这是实现联动的核心步骤。
• jQuery选择器修正：你之前写的$('menu-1' + id)是错误的，类选择器需要加前缀.，比如$('.menu-1')；如果是ID选择器才用#。
• 联动触发时机：在第一个下拉框的onChange里同时调用updateMenuDisplay()，确保切换分类后也能同步更新菜单状态；第二个下拉框的onChange直接调用该函数。
• 用户体验优化：生成第二个下拉框选项时补全了默认提示，避免用户无选项可选的尴尬。

这样修改后，就能完美实现你需要的联动显示效果啦！

内容的提问来源于stack exchange，提问作者Thom-pouce-dev