如何在JavaScript或React.js中根据所选数字创建多个输入元素

核心思路 #

监听数字选择框的变化事件，根据选中的数字清空并动态生成对应数量的输入元素。

代码实现 #

HTML 结构

<!-- 数字选择下拉框 -->
<select id="numberSelector">
  <option value="0">请选择数字</option>
</select>

<!-- 动态输入框容器 -->
<div id="inputContainer"></div>

JavaScript 逻辑

// 获取DOM元素
const numberSelector = document.getElementById('numberSelector');
const inputContainer = document.getElementById('inputContainer');

// 动态生成1-10的数字选项（可按需调整范围）
for (let i = 1; i <= 10; i++) {
  const option = document.createElement('option');
  option.value = i;
  option.textContent = i;
  numberSelector.appendChild(option);
}

// 监听选择变化事件
numberSelector.addEventListener('change', function() {
  const selectedCount = parseInt(this.value);
  // 清空容器，避免重复生成
  inputContainer.innerHTML = '';

  // 生成对应数量的输入框
  if (selectedCount > 0) {
    for (let i = 1; i <= selectedCount; i++) {
      const input = document.createElement('input');
      input.type = 'text';
      input.placeholder = `输入项 ${i}`;
      input.className = 'dynamic-input'; // 可自定义类名用于样式控制
      inputContainer.appendChild(input);
      // 添加换行或间距优化布局
      inputContainer.appendChild(document.createElement('br'));
    }
  }
});

可选样式优化（CSS）

如果需要让输入框布局更美观，可添加CSS：

.dynamic-input {
  margin: 8px 0;
  padding: 6px;
  width: 200px;
}

关键说明 #

• 每次选择变化时先清空容器，防止旧的输入框残留
• 通过createElement动态创建输入元素，可灵活设置属性（如name、id、样式类等）
• 数字选项支持动态生成，无需手动逐个编写，可根据需求调整生成范围

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