如何控制<input type='number'>输入值生成对应数量的<select>下拉选框

问题原因 #

• 原代码每次输入事件触发仅新增select标签，未对比当前已有select数量和输入值的差异，没有删除多余节点的逻辑
• 输入框获取的value是字符串类型，直接和数字比对会出现类型不匹配问题
• 每次新增select用动态class绑定，重复触发时可能会给多个select批量加option，逻辑冗余

修正后代码 #

HTML部分 #

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<input type="number" id="cCount" min="0">
<div id="counter2"></div>

JS部分 #

function getChildNumberAndAges() {
  // 把输入值转成数字，设置最小为0避免负数
  const targetCount = Math.max(0, parseInt(document.getElementById('cCount').value) || 0)
  const $container = $('#counter2')
  const currentCount = $container.children('select').length

  // 数量不够就新增差额部分
  if (currentCount < targetCount) {
    const needAdd = targetCount - currentCount
    for (let i = 0; i < needAdd; i++) {
      const $select = $('<select>', {
        class: 'child-age'
      })
      // 仅给当前新增的select添加option，避免影响已有元素
      for (let j = 0; j < 19; j++) {
        $('<option>', {
          value: j,
          class: 'age'
        }).text(j + ' years old').appendTo($select)
      }
      $select.appendTo($container)
    }
  } 
  // 数量超出就删除末尾多余的select
  else if (currentCount > targetCount) {
    const needDel = currentCount - targetCount
    $container.children('select').slice(-needDel).remove()
  }
}

// 绑定输入事件，替换原错误的行内绑定写法
$('#cCount').on('input', getChildNumberAndAges)

逻辑说明 #

• 每次输入触发时先处理输入值，转换为合法数字，兼容空输入、负数等异常情况
• 统计当前容器内已有的select数量，和目标数量做比对
• 数量不足时批量新增差额的select，数量超出时删除末尾的冗余select，保留前面用户已选择过内容的select，体验更友好
• 取消不必要的全局变量声明，减少全局污染

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