下拉框控制输入文本框数量：初始2个，可选2-6个的实现求助

原代码存在的问题 #

• 输入框type属性设置错误：将type设为"textbox"<br>是无效的，正确的文本输入框类型是text，换行需要单独创建<br>元素插入。
• 初始未显示2个文本框：页面加载完成后没有默认生成2个输入框，不符合需求。
• 事件绑定不合理：使用onclick绑定下拉框事件，点击已选中的选项不会触发，改用onchange更合适。
• HTML结构缺失：缺少承载文本框的容器dsets，且原HTML的表格结构不完整。

修正后的完整代码 #

<table>
  <tr>
    <td>
      <select class="displaymenu" onchange="addElements(this)" id="textboxes">
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
      </select>
    </td>
  </tr>
  <tr>
    <td id="dsets"></td>
  </tr>
</table>

<script>
// 页面加载完成后默认生成2个文本框
window.onload = function() {
  addElements(document.getElementById('textboxes'));
};

function addElements(selectElement) {
  var textboxNumbers = parseInt(selectElement.value);
  var dsets = document.getElementById("dsets");

  // 清空容器
  dsets.innerHTML = "";

  for (var i = 0; i < textboxNumbers; i++) {
    var yourTextboxes = document.createElement("INPUT");
    // 设置正确的type属性
    yourTextboxes.setAttribute("type", "text");
    yourTextboxes.setAttribute("id", "dsid"+(i+1));
    yourTextboxes.setAttribute("placeholder", "DataSet Name "+(i+1));
    yourTextboxes.setAttribute("style", "height: 25px; width: 250px; margin-bottom: 8px;");
    dsets.appendChild(yourTextboxes);
    
    // 添加换行元素，让每个输入框单独一行
    if (i !== textboxNumbers - 1) {
      dsets.appendChild(document.createElement("br"));
    }
  }
}
</script>

修复说明 #

1. 初始显示2个文本框：通过window.onload事件，页面加载完成后自动调用addElements函数，默认选中值为2的选项。
2. 修正输入框type：将输入框类型改为text，单独创建<br>元素实现换行，避免无效属性。
3. 优化事件绑定：改用onchange事件，只有当选项变化时才触发文本框的更新，逻辑更合理。
4. 完善HTML结构：补充了承载文本框的dsets容器，修复了表格的完整结构。

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