Spring Boot 中处理动态多选下拉列表值提交的客户端聚合方案

<form action="/submitSelections" method="post">
    <div th:each="group : ${groups}">
        <label th:text="${group.name + ': '}"></label>
        <!-- 每个下拉列表都绑定一个 onchange 事件，调用 aggregateSelection 函数 -->
        <select class="item-selector" onchange="aggregateSelection(this, 'allSelectedItemsHiddenField');">       
            <option value="">-- 请选择 --</option> <!-- 添加一个默认选项 -->
            <option th:each="item: ${group.items}" th:object="${item}" th:value="${item.id}" th:text="${item.name}"></option>
        </select>
        <br>
    </div>

    <!-- 用于聚合所有选择值的隐藏输入字段 -->
    <input id="allSelectedItemsHiddenField" type="hidden" name="selectedItemsAggregate" value="">

    <button type="submit">提交选择</button>
</form>

<script>
    // 用于存储每个下拉列表当前选择值的对象
    const currentSelections = {};

    /**
     * 聚合所有下拉列表的当前选择值到隐藏字段中。
     * @param {HTMLSelectElement} selectElement 触发事件的下拉列表元素。
     * @param {string} hiddenFieldId 用于聚合值的隐藏输入字段的ID。
     */
    function aggregateSelection(selectElement, hiddenFieldId) {
        const selectedValue = selectElement.value;
        const selectId = selectElement.id || selectElement.name; // 使用ID或name作为下拉列表的唯一标识

        // 更新当前下拉列表的选择值
        if (selectedValue) {
            currentSelections[selectId] = selectedValue;
        } else {
            // 如果选择了默认的"请选择"选项，则移除该下拉列表的记录
            delete currentSelections[selectId];
        }

        // 重新构建隐藏字段的值
        const hiddenField = document.getElementById(hiddenFieldId);
        let aggregatedString = '';
        for (const key in currentSelections) {
            if (currentSelections.hasOwnProperty(key)) {
                aggregatedString += currentSelections[key] + '_'; // 使用下划线作为分隔符
            }
        }
        // 移除末尾可能多余的分隔符
        hiddenField.value = aggregatedString.endsWith('_') ? aggregatedString.slice(0, -1) : aggregatedString;
    }
</script>

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import java.util.Arrays;
import java.util.List;
import java.util.stream.Collectors;

@Controller
public class SelectionController {

    @PostMapping("/submitSelections")
    public String handleSubmit(@RequestParam("selectedItemsAggregate") String selectedItemsAggregate, Model model) {
        // 检查接收到的字符串是否为空或只包含分隔符
        if (selectedItemsAggregate == null || selectedItemsAggregate.trim().isEmpty()) {
            model.addAttribute("message", "未选择任何项目。");
            model.addAttribute("selectedIds", List.of());
            return "resultPage"; // 假设有一个结果展示页面
        }

        // 使用分隔符 "_" 将字符串分割成列表
        List<String> selectedIds = Arrays.asList(selectedItemsAggregate.split("_"))
                                        .stream()
                                        .filter(s -> !s.isEmpty()) // 过滤掉可能的空字符串（例如，如果字符串以分隔符结尾）
                                        .collect(Collectors.toList());

        // 现在 selectedIds 包含了所有下拉列表的选中值
        System.out.println("接收到的选中ID列表: " + selectedIds);

        // 可以根据这些ID从数据库中查询相应的对象，进行业务处理
        // List<YourObject> selectedObjects = yourService.findByIds(selectedIds);

        model.addAttribute("selectedIds", selectedIds);
        model.addAttribute("message", "成功提交选择！");
        return "resultPage"; // 导航到结果页面
    }
}