如何通过type="number"的input元素循环生成select元素？

我希望仅通过JavaScript实现循环生成select元素，以下是我的示例代码：

<input type="number" id="test" onkeydown="javascript:return event.keyCode==69? false:true" name="form_select" class="text" onchange="showDiv()">
<select id="hidden_div1" style="display:none;" name="form_select">
   <option value="0">No</option>
   <option value="1">Yes</option>
</select>
<div id="allcontent1"></div>
<script>
  function showDiv(){
    allselect="";
    getSelectValue = parseInt(document.getElementById("test").value);
    if(getSelectValue > 0){
      for (let i=0;i<getSelectValue;i++){
        allselect+=document.getElementById("hidden_div1").style.display="block";
      }
    }else{
      document.getElementById("hidden_div1").style.display="none";
    }
    document.getElementById("allcontent1").innerHtml = allselect;
  }
</script>

代码问题说明及修正方案 #

原代码存在两处关键问题：

• 直接修改隐藏select的display属性并将赋值结果（block字符串）拼接到allselect中，无法生成新的select元素，只是重复添加字符串"block"
• 拼写错误：innerHtml应为innerHTML

以下是修正后的代码，通过克隆模板select元素来循环生成新的select：

<input type="number" id="test" onkeydown="javascript:return event.keyCode==69? false:true" name="form_select" class="text" onchange="showDiv()">
<!-- 作为模板的select，保持隐藏 -->
<select id="selectTemplate" style="display:none;" name="form_select">
   <option value="0">No</option>
   <option value="1">Yes</option>
</select>
<div id="allcontent1"></div>
<script>
  function showDiv(){
    const container = document.getElementById("allcontent1");
    // 清空容器原有内容
    container.innerHTML = "";
    const count = parseInt(document.getElementById("test").value) || 0;
    
    if(count > 0){
      const template = document.getElementById("selectTemplate");
      for(let i=0; i<count; i++){
        // 克隆模板元素，true表示克隆子元素
        const newSelect = template.cloneNode(true);
        // 移除模板的id，避免重复
        newSelect.removeAttribute("id");
        // 显示新生成的select
        newSelect.style.display = "block";
        // 添加到容器中
        container.appendChild(newSelect);
      }
    }
  }
</script>

修正后的逻辑说明 #

• 保留隐藏的select作为模板，避免重复编写option结构
• 每次生成前清空容器，避免重复累加
• 使用cloneNode(true)克隆完整的select元素（包括内部option）
• 移除克隆元素的id，避免页面中出现重复id的元素
• 直接将克隆后的元素添加到容器中，而非拼接字符串

内容的提问来源于stack exchange，提问作者GALON MARKJAYPEE