要实现显示所有小于或等于下拉菜单中所选值的div的预期行为，需要相应地修改JavaScript代码。您可以使用一个循环遍历所有div并检查它们的ID，以确定是否应该显示或隐藏它们，而不是通过它们的ID显示/隐藏单个div。

<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 = $(this).val();

      // Hide all divs first
      $('.types').hide();

      // Show divs less than or equal to the selected value
      for (var i = 1; i <= val; i++) {
        $(`#${i}`).show();
      }
    });
  });
</script>

字符串
当你从下拉列表中选择一个值时，所有ID小于或等于所选值的div都会显示出来，而其他div则保持隐藏状态。该循环从1开始到选定的值，对于每次迭代，它都显示具有相应ID的div。

您可以使用:lt()选择器来实现这一点。在你目前的结构中，你有所有div的公共类，即：types所以use可以添加一行$(.types:lt(${val})).show()，这将选择所有小于给定值的div并显示它们。

• 演示代码 *：

$(document).ready(function() {
  $("#elementreg").on("change", function() {
    var val = $(this).val();
    $('.types').hide(); //hide all
    $(`.types:lt(${val})`).show(); //show div where class index - < value frm dropdown choosen 
  });
});

.types {
  display: none;
  border: 1px solid black;
  padding: 5px;
  margin: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>