如何用Javascript实现表单中可动态添加的教师分配选择项

1 调整原有HTML代码 #

先对现有HTML做两处必要修改，适配多值提交和JS操作需求：

• 将下拉框的name属性从teachername修改为teachername[]，表单提交时会以数组格式传递所有选中的教师值
• 给添加按钮、下拉框存放容器增加标识，方便JS绑定事件和操作DOM

修改后的完整HTML代码如下：

<div class="form-group row">
  <label class="col-sm-2 col-form-label">Teacher</label>
  <!-- 下拉框存放容器 -->
  <div class="teacher-select-container">
    <div class="form-group d-flex align-items-center">
      <select class="form-control" name="teachername[]">
        <option>Sarah</option>
        <option>Adam</option>
        <option>Mark</option>
        <option>Anderson</option>
        <option>Wood</option>
      </select>
    </div>
  </div>
  <div class="ml-auto p-2">   
    <!-- 给添加按钮增加唯一ID -->
    <button type="button" id="add-teacher-btn" class="btn btn-primary">+</button>
  </div>
</div>

2 添加JavaScript逻辑 #

以下是无第三方依赖的原生JS实现，点击+按钮即可新增教师选择框，新增的选择框自带删除按钮可随时移除：

// 等待页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const addBtn = document.getElementById('add-teacher-btn');
  const selectContainer = document.querySelector('.teacher-select-container');
  // 可自定义最多可添加的教师数量，设为0则不限制
  const maxTeacherCount = 5;

  addBtn.addEventListener('click', function() {
    // 检查是否达到上限
    const currentCount = selectContainer.querySelectorAll('.form-group').length;
    if(maxTeacherCount > 0 && currentCount >= maxTeacherCount) {
      alert('最多只能添加' + maxTeacherCount + '名任课教师');
      return;
    }

    // 克隆已有的选择框节点
    const firstSelectGroup = selectContainer.querySelector('.form-group');
    const newSelectGroup = firstSelectGroup.cloneNode(true);
    // 重置新选择框的选中状态为第一个选项
    newSelectGroup.querySelector('select').selectedIndex = 0;

    // 给新增选择框添加删除按钮
    const delBtn = document.createElement('button');
    delBtn.type = 'button';
    delBtn.className = 'btn btn-danger ml-2';
    delBtn.innerText = '-';
    delBtn.addEventListener('click', function() {
      this.parentElement.remove();
    });
    newSelectGroup.appendChild(delBtn);

    // 将新增选择框插入到容器中
    selectContainer.appendChild(newSelectGroup);
  });
});

3 注意事项 #

• 表单提交后，后端接收到的teachername字段为数组格式，直接遍历即可获取所有选中的任课教师
• 可自行修改代码中的maxTeacherCount参数调整最多可添加的教师数量，设置为0即可无限制添加

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