如何用jQuery结合类型选择器控制CSS容器的显示与隐藏

页面中存在类型选择器（Type Switcher）和多个带有独立ID的容器（红框标注）。需要实现以下交互：当在类型选择器中选中某一选项时，仅对应ID的容器保持可见，其余所有容器均隐藏。例如，当选中“Furniture”选项时，仅ID为“Furniture”的容器可见，其他容器全部隐藏。本人完全不熟悉jQuery的使用。

<form id="product_form">
  <label id="caption" style="line-height: 180%;">SKU <input type="text" id="text-field" name="sku" style="margin-left: 37px;"/></label><br />
  <label id="caption" style="line-height: 180%;">Name <input type="text" id="text-field" name="name" style="margin-left: 21px;"/></label><br />
  <label id="caption" style="line-height: 180%;">Price($) <input type="text" id="text-field" name="price" style="margin-left: 2px;"/></label><br />
  <br />
  <label id="caption">Type Switcher<select id="productType" name="type" style="margin-left: 5px;">
                    <option value="D">DVD</option>
                    <option value="B">Book</option>
                    <option value="F">Furniture</option>
                </select></label>
  <br /><br /><br />
  <div id="DVD">
    <p style="text-align: left; line-height:180%;" id="caption">Please provide size in MB</p>
    <label id="caption" style="line-height: 180%;">Size (MB) <input type="number" name="size" style="margin-left: 2px" /></label>
  </div>
  <div id="Book">
    <p style="text-align: left; line-height:180%;" id="caption">Please provide weight in KG</p>
    <label id="caption" style="line-height: 180%;">Weight (KG) <input type="number" name="weight" style="margin-left: 2px" /></label>
  </div>
  <div id="Furniture">
    <p style="text-align: left; line-height:180%;" id="caption">Please provide dimensions in HxWxL format</p>
    <label id="caption" style="line-height: 180%;">Height (CM) <input type="number" name="height" style="margin-left: 5px" /></label><br />
    <label id="caption" style="line-height: 180%;">Width (CM) <input type="number" name="width" style="margin-left: 11px" /></label><br />
    <label id="caption" style="line-height: 180%;">Length (CM) <input type="number" name="Length" style="margin-left: 2px" /></label><br />
  </div>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1. 初始状态设置 #

页面加载时，默认选中“DVD”选项，先隐藏Book和Furniture容器，只保留DVD容器可见。

2. 绑定选择器切换事件 #

用jQuery监听下拉框的选项变化，每次切换时先隐藏所有容器，再显示对应选中类型的容器。

完整实现代码 #

在现有<script>标签后添加以下代码：

// 等页面所有元素加载完成再执行代码
$(document).ready(function() {
  // 初始隐藏非默认显示的容器
  $('#Book, #Furniture').hide();
  
  // 监听类型选择器的切换事件
  $('#productType').on('change', function() {
    // 获取当前选中选项的文本（如"DVD"、"Book"）
    var selectedType = $(this).find('option:selected').text();
    
    // 统一隐藏所有类型容器
    $('#DVD, #Book, #Furniture').hide();
    // 显示选中类型对应的容器
    $('#' + selectedType).show();
  });
});

代码说明 #

• $(document).ready(...)：确保页面元素全部加载完成后再执行代码，避免出现找不到容器的错误。
• $('#Book, #Furniture').hide()：设置初始状态，只显示默认选中的DVD容器。
• $('#productType').on('change', ...)：给下拉框绑定选项变化事件，每次切换选项就触发函数逻辑。
• $(this).find('option:selected').text()：获取选中选项的文本内容，该内容正好对应容器的ID。
• $('#DVD, #Book, #Furniture').hide()：先隐藏所有容器，避免出现多个容器同时显示的情况。
• $('#' + selectedType).show()：显示与选中选项对应的容器。

优化提示 #

• 页面中多个元素使用了同一个id="caption"，ID在页面中必须唯一，建议改为class="caption"，再通过CSS设置样式。
• 可以给所有类型容器添加共同类名（如class="product-container"），这样隐藏容器时只需写$('.product-container').hide()，无需逐个列出ID，代码更简洁。

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