如何通过AJAX为动态添加的下拉框填充数据库数据

1. 新增Controller接口返回JSON数据 #

原有的/assignSubjects接口返回的是视图页面，无法直接通过AJAX获取可用的Staff和Subject列表数据，需要新增一个专门返回JSON格式数据源的接口：

@GetMapping("/api/assignSubjects/data")
@ResponseBody
public Map<String, Object> getAssignSubjectsData() {
    List<Subjects> listSubjects = subjectService.listAllSubjects();
    List<Staff> listStaffs = staffService.listAllStaff();
    
    Map<String, Object> data = new HashMap<>();
    data.put("listSubjects", listSubjects);
    data.put("listsStaffs", listStaffs);
    return data;
}

2. 修改JavaScript逻辑 #

现有代码存在接口请求错误、固定ID重复、HTML插入顺序错误等问题，修正后的代码如下：

addNextDetailSection = () => {
    const contextPath = "[[@{/}]]";
    const requestURL = contextPath + "api/assignSubjects/data";
  
    // 先请求数据源
    $.ajax({
        type: "GET",
        url: requestURL,
        success: function(data){
            // 生成新增区域的HTML，使用类选择器避免重复ID
            const htmlTeacherSubjectSection = `
                <div class="row mt-2" >
                    <div class="col-1">
                        <label class="col-form-label">Teacher</label>
                    </div>
                    <div class="col-4"> 
                        <select class="custom-select teacher-select">
                            <option selected>Select Teacher</option>   
                        </select>  
                    </div>

                    <div class="col-1">
                        <label class="col-form-label ml-4">Subject</label>
                    </div>
                    <div class="col-4">
                        <select class="custom-select form-select-sm subject-select" name="selectSubject">
                            <option selected>Select Subject</option>
                        </select>
                    </div>
                </div>
            `;
            
            // 将新增区域插入页面，并获取该区域的jQuery对象
            const $newSection = $(htmlTeacherSubjectSection);
            $("#divStaffSubject").append($newSection);
            
            // 为当前新增的Teacher下拉框填充数据
            $.each(data.listsStaffs, function (key, staff) {
                $newSection.find(".teacher-select").append(`<option value="${staff.id}">${staff.fullName}</option>`);
            });
            
            // 为当前新增的Subject下拉框填充数据
            $.each(data.listSubjects, function (key, subject) {
                $newSection.find(".subject-select").append(`<option value="${subject.id}">${subject.name}</option>`);
            });
        }
    });
}

3. 修正原有HTML的错误 #

原HTML中第一个Subject下拉框的默认提示文本错误，修改为匹配功能的提示：

<select class="form-select ">
    <option selected>Select Subject</option>
    <th:block th:each="staff : ${listsStaffs}">
        <option th:value="${staff.id}">[[${staff.fullName}]]</option>
    </th:block>
</select>

关键说明 #

• 新增的/api/assignSubjects/data接口专门提供JSON格式的数据源，适配AJAX调用需求
• 使用类选择器替代固定ID，避免重复ID导致的DOM选择失效问题
• 调整流程为「请求数据→生成HTML→插入页面→填充当前新增下拉框」，确保每个新增的下拉框都能正确加载数据
• 统一下拉框的默认提示文本，保证用户体验一致性

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