多select框.change事件问题：仅能同时显示一个选择框对应内容

你的代码问题在于：每次任意一个下拉框触发change事件时，都会同时操作披萨（pizza）和汽水（soda）的所有元素。比如选择汽水选项时，代码会尝试隐藏所有不包含该汽水值的披萨元素——但披萨元素根本没有这个类，导致所有披萨被隐藏；同理选择披萨时会隐藏所有汽水元素，最终只能同时显示一个内容。

要让两个下拉框独立控制各自的内容，需要给每个下拉框标记对应的内容组，然后在事件中只操作对应组的元素。

1. 修改HTML结构 #

给每个下拉框添加data-target属性，明确它控制的内容类：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select data-target="soda">
  <option>Choose Soda</option>
  <option value="food-s">pepsi</option>
</select>
<select data-target="pizza">
  <option>Choose Pizza</option>
  <option value="food-p">cheese</option>
</select>
<p> Display </p>
<div class="food-s soda">
  <strong>Choose a Soda:</strong>
  <ul>
    <li>Coke</li>
    <li>Pepsi</li>
    <li>Diet</li>
  </ul>
</div>
<div class="food-p pizza">
  <strong>Choose a Pizza:</strong>
  <ul>
    <li>Cheese</li>
    <li>Extra Cheese</li>
  </ul>
</div>

2. 重写JavaScript逻辑 #

让每个下拉框只操作自己对应的内容组，不影响另一组：

$(document).ready(function() {
  $("select").change(function() {
    // 获取当前下拉框对应的内容组
    const targetGroup = $(this).data('target');
    // 获取选中的值
    const selectedValue = $(this).val();

    if (selectedValue) {
      // 隐藏当前组所有元素，再显示选中值对应的元素
      $(`.${targetGroup}`).hide();
      $(`.${selectedValue}.${targetGroup}`).show();
    } else {
      // 未选中选项时，隐藏当前组所有元素
      $(`.${targetGroup}`).hide();
    }
  }).change(); // 页面加载时触发一次，初始化默认状态
});

• 用data-target明确下拉框的控制对象，避免交叉操作
• 直接通过$(this).val()获取选中值，无需遍历option元素
• 每次仅操作当前下拉框对应的内容组，不干扰另一组的显示状态
• 初始化触发change事件，确保默认状态下所有内容隐藏

修改后，两个下拉框可独立工作：选中汽水时显示汽水内容，选中披萨时显示披萨内容，两者可同时展示。

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