如何实现下拉菜单选中值后显示所有小于等于该值的元素？

问题背景 #

原代码实现的是：选择下拉菜单中的某一值时，仅显示对应ID的div。需求修改为：选择某值后，显示所有ID小于等于该值的div（例如选择3时，显示ID为1、2、3的div）。

用户尝试将代码中的：

$(#${val}).show(); //show by matching the selected value

修改为：

$(div[id <= ${val}]).show(); //show all divs less than or equal to val

但该写法功能失效——因为jQuery的属性选择器不支持直接使用<=这类比较运算符，不符合CSS选择器语法规范，无法正确筛选元素。

正确实现方法 #

可以使用jQuery的.filter()方法筛选符合条件的元素，以下是修改后的完整代码：

修改后的完整代码

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

<script>
  $(document).ready(function() {
    $("#elementreg").on("change", function() {
      var val = parseInt($(this).val(), 10); // 将选中值转为整数，避免字符串比较问题

      $('.types').hide(); // 先隐藏所有类型div
      
      // 仅当选中有效数值时执行显示逻辑
      if (!isNaN(val)) {
        $('.types').filter(function() {
          // 将当前div的ID转为整数，判断是否小于等于选中值
          return parseInt(this.id, 10) <= val;
        }).show();
      }
    });
  });
</script>

<label for="How Many Chips">How Many Chips?:</label>

<select class="medium" id="elementreg" name="amount">
  <option value="" selected="selected"></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<div class="types" id="1">
  <input name="First Chip ID">
</div>

<div class="types" id="2">
  <input name="First Chip ID">
  <input name="Second Chip ID">
</div>

<div class="types" id="3">
  <input name="First Chip ID">
  <input name="Second Chip ID">
  <input name="Third Chip ID">
</div>

<div class="types" id="4">
  <input name="First Chip ID">
  <input name="Second Chip ID">
  <input name="Third Chip ID">
  <input name="Fourth Chip ID">
</div>

代码说明 #

1. 转整数处理：将下拉菜单选中的值和div的ID都转为整数，避免字符串比较带来的错误（比如字符串"10"会被错误判定为小于"2"）。
2. 筛选逻辑：使用.filter()方法遍历所有.types元素，只保留ID小于等于选中值的元素并显示。
3. 空选项处理：当选中空选项时，所有.types元素保持隐藏状态。

替代实现（遍历判断） #

如果偏好遍历写法，也可以用.each()方法实现相同逻辑：

$(document).ready(function() {
  $("#elementreg").on("change", function() {
    var val = parseInt($(this).val(), 10);

    $('.types').hide();
    if (!isNaN(val)) {
      $('.types').each(function() {
        var divId = parseInt(this.id, 10);
        if (divId <= val) {
          $(this).show();
        }
      });
    }
  });
});

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