如何根据下拉选择框的值动态显示对应数量的输入表单

完整代码实现 #

首先修改HTML结构，添加一个容器用于承载动态生成的输入表单：

<div class="col-4">
  <label for="proses">Proses</label>
  <select class="form-control" id="prosess" name="prosess" required>
    <option value="" hidden>- Pilih Proses -</option>
    <option value="1">1 Proses</option>
    <option value="2">2 Proses</option>
    <option value="3">3 Proses</option>
    <option value="4">4 Proses</option>
    <option value="5">5 Proses</option>
    <option value="6">6 Proses</option>
    <option value="7">7 Proses</option>
    <option value="8">8 Proses</option>
    <option value="9">9 Proses</option>
  </select>
</div>
<!-- 新增容器用于存放动态输入框 -->
<div id="processInputsContainer" class="col-12 mt-3"></div>

然后添加JavaScript逻辑，监听下拉框的选择事件，动态生成对应数量的输入表单：

// 获取下拉框和容器元素
const processSelect = document.getElementById('prosess');
const inputsContainer = document.getElementById('processInputsContainer');

// 监听下拉框变化事件
processSelect.addEventListener('change', function() {
  const selectedCount = parseInt(this.value);
  // 清空容器原有内容
  inputsContainer.innerHTML = '';
  
  // 如果选中有效数值，生成对应数量的输入框
  if (!isNaN(selectedCount) && selectedCount > 0) {
    for (let i = 1; i <= selectedCount; i++) {
      // 创建输入框组
      const inputGroup = document.createElement('div');
      inputGroup.className = 'form-group col-4 mb-2';
      
      // 创建label
      const label = document.createElement('label');
      label.textContent = `第${i}个流程`;
      label.htmlFor = `process-${i}`;
      
      // 创建输入框
      const input = document.createElement('input');
      input.type = 'text';
      input.className = 'form-control';
      input.id = `process-${i}`;
      input.name = `process-${i}`;
      input.required = true;
      
      // 组装并添加到容器
      inputGroup.appendChild(label);
      inputGroup.appendChild(input);
      inputsContainer.appendChild(inputGroup);
    }
  }
});

关键说明 #

• 每次选择下拉框时，先清空容器内的旧输入框，避免重复生成
• 仅当选中有效数值（1-9）时才生成输入框，未选择时不显示任何内容
• 生成的输入框使用process-1、process-2这样的命名规则，方便表单提交时获取数据
• 保持和原代码一致的Bootstrap样式，确保页面风格统一

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