我对HTML和JavaScript非常陌生和缺乏经验。对于任何效率低下或语法荒谬的地方，我深表歉意。
我目前正在尝试在HTML页面上包含一个功能，该功能的下拉菜单包含1到4的数值。将根据下拉菜单中选择的值生成相应数量的文本框。
下面是我目前拥有的代码：

<script>
  $("#elementreg").on("change", function() {
  var val = $(this).val();
  
  $(".types").hide().find('input:text').val(''); // 
  if (val) $("#" + val).show();
  });
</script>

<select class="medium" id="elementreg" name="IDs">
    <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>

字符串
结果是，在下拉菜单上选择值时不会发生任何事情，并且输入框也不会隐藏。我怀疑我需要包含以下CSS代码片段：

.types {
  display: none
}

型
但我不知道该如何处理这件事。此外，我不确定脚本一开始是否正确实现。任何和所有的建议都非常感谢。