基于<select>选择值动态显示对应数量<select>控件问题排查

嘿，我来帮你捋捋代码里的问题，看看为啥动态显示年龄选择框的功能没正常工作：

核心问题分析 #

1. 没监听下拉框的选项变化 #

你的jQuery代码只在页面刚加载时执行了一次，也就是读取一次#bimbi的初始值并显示对应控件，但用户后续切换下拉选项时，完全没有代码响应这个操作，所以不会动态更新显示的年龄框。

2. 重复ID违反HTML规范 #

你给多个<option>都加了bmb1、bmb2这类重复的ID，这是不行的——HTML里ID必须是页面唯一的，浏览器会忽略重复的ID，可能导致后续DOM操作出问题，而且完全没必要给option加ID，这里直接删掉就行。

3. 代码太冗余 #

你写了一堆重复的slideDown()调用，其实用个循环就能搞定，不用每个数值都写一遍判断，既麻烦又容易出错。

4. 小细节错误 #

第四个年龄选择框里的选项文本是0-5 anni()，括号里空着，应该改成和其他一致的0-5 anni(4)，不然用户看着也奇怪。

修复后的完整代码 #

下面是修正后的代码，所有问题都处理好了，直接用就行：

HTML部分 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
  #etbimbo1, #etbimbo2, #etbimbo3, #etbimbo4 { display: none; }
</style>
<div id="flip">
  <select name="bambini" id="bimbi">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
</div>
<select name="bambini" id="etbimbo1" class="bm">
  <option value="bimbo1">0-5 anni(1)</option>
  <option value="bimbo2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo2" class="bm">
  <option value="bimbo1">0-5 anni(2)</option>
  <option value="bimbo2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo3" class="bm">
  <option value="bimbo1">0-5 anni(3)</option>
  <option value="bimbo2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo4" class="bm">
  <option value="bimbo1">0-5 anni(4)</option>
  <option value="bimbo2">6-12 anni</option>
</select>

jQuery部分 #

$(document).ready(function() {
  // 封装成函数，方便重复调用
  function updateAgeSelects() {
    var selectedNum = $('#bimbi').val();
    // 先把所有年龄框都隐藏，避免切换数值时残留
    $('.bm').slideUp();
    // 循环显示对应数量的年龄框
    for(let i = 1; i <= selectedNum; i++) {
      $('#etbimbo' + i).slideDown();
    }
  }

  // 页面加载时初始化一次，显示默认选中的数量
  updateAgeSelects();

  // 监听下拉框的change事件，每次切换选项就更新
  $('#bimbi').on('change', updateAgeSelects);
});

修复亮点 #

• 新增change事件监听，用户切换选项时自动触发更新
• 移除重复ID，符合HTML规范
• 用循环简化冗余代码，后续要加更多选项（比如到5）也只要改循环上限就行
• 增加了“先隐藏所有框”的逻辑，切换数值时（比如从3改成2），多余的框会自动收起来
• 修正了第四个年龄框的文本错误

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