基于number类型输入框动态添加/移除下拉列表的实现问题

嘿，我来帮你搞定这个动态添加/移除下拉框的需求！之前的实现不够规范，咱们可以用更清晰、可维护的方式来做，同时完美解决移除最后一个元素的问题。

• 准备一个隐藏的下拉框模板，用来克隆生成新的下拉框，保证每次添加的结构完全一致
• 监听数字输入框的input事件，实时对比目标数量和现有下拉框的数量
• 数值递增时，克隆模板并添加到容器中，完全保留已有下拉框的选中值
• 数值递减时，从最后一个下拉框开始移除，直到数量和目标值匹配

HTML部分 #

<div class="row step2">
  <!-- 数字输入框：控制下拉框数量 -->
  <input type="number" id="dropdownCount" min="1" value="1" placeholder="请输入下拉框数量">
  
  <!-- 用来存放所有动态下拉框的容器 -->
  <div id="dropdownContainer">
    <!-- 初始的第一个下拉框 -->
    <select class="dynamic-dropdown">
      <option value="option1">选项1</option>
      <option value="option2">选项2</option>
      <option value="option3">选项3</option>
    </select>
  </div>
  
  <!-- 隐藏的模板：用来克隆生成新下拉框，默认不显示 -->
  <select class="dynamic-dropdown template" style="display: none;">
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
  </select>
</div>

JavaScript部分 #

// 获取DOM元素
const countInput = document.getElementById('dropdownCount');
const dropdownContainer = document.getElementById('dropdownContainer');
const dropdownTemplate = document.querySelector('.dynamic-dropdown.template');

// 监听输入框的数值变化
countInput.addEventListener('input', function() {
  // 确保目标数量是有效数字，且至少为1
  const targetCount = parseInt(this.value) || 1;
  // 获取当前已有的下拉框数量
  const currentCount = dropdownContainer.querySelectorAll('.dynamic-dropdown').length;

  // 处理数值递增：添加新的下拉框
  if (targetCount > currentCount) {
    for (let i = currentCount; i < targetCount; i++) {
      // 克隆模板节点（true表示深度克隆，包含所有子元素）
      const newDropdown = dropdownTemplate.cloneNode(true);
      // 移除模板类，让新下拉框显示出来
      newDropdown.classList.remove('template');
      // 添加到容器中
      dropdownContainer.appendChild(newDropdown);
    }
  } 
  // 处理数值递减：移除最后一个下拉框
  else if (targetCount < currentCount) {
    const allDropdowns = dropdownContainer.querySelectorAll('.dynamic-dropdown');
    // 从最后一个元素开始删除，直到数量匹配
    for (let i = currentCount - 1; i >= targetCount; i--) {
      allDropdowns[i].remove();
    }
  }
});

• 模板克隆优势：用隐藏模板生成新下拉框，避免重复编写HTML结构，保证所有下拉框的一致性，后续修改下拉框选项只需改模板即可
• 数值安全处理：parseInt(this.value) || 1可以防止用户输入非数字内容，同时确保至少保留1个下拉框
• 保留已有值：我们只操作新增或删除下拉框，不会修改已有下拉框的DOM，所以用户之前选中的选项会完全保留
• 高效移除逻辑：通过querySelectorAll获取所有下拉框，从末尾开始删除，避免DOM操作顺序问题

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