关于selectpicker的多选问题

刚开始拿到这个需要求的时候，我时很没有头绪的，再前期做的时候是将这个多选的作为一个数组，传入到后端，然后再插入数据库中，然后根据关系表查询，因为但是考虑显示的问题，不知道怎么将多选的数据显示出来，我就将每个多选的值都一条条显示出来，导致了本来就是需要一条记录的，最终显示了多条，结果嘛，当时半夜就被臭了一顿，最后还是靠别人的解释，才写了一遍，就写下这个来记录下我这多选的问题：

前端的jsp页面

<%@ taglib prefix="from" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.fasterxml.jackson.databind.ObjectMapper" %>
<%@ page import="im.lsn.framework.springmvc.StringJspWriter" %>
<%@ page import="im.lsn.framework.springmvc.json.JsonDialog" %>
<%@ page import="im.lsn.framework.springmvc.json.JsonObject" %>
<%@ include file="/WEB-INF/include/taglib.jsp" %>
<%
    out = new StringJspWriter();
    pageContext.pushBody(out);
%>
<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">编辑</div>
            <div class="modal-body">
                <form:form action="${ctxRoot}/admin/organizer/save_exhibitorInfo.do" class="form-horizontal es-form"
                           commandName="editForm" method="post">
                    <from:hidden path="id"/>
                    <div class="form-group">
                        <form:label path="name" class="control-label">展会名称：</form:label>
                        <div class="control-input">
                            <form:input path="name" cssClass="form-control"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <form:label path="createTime" class="control-label">开始时间：</form:label>
                        <div class="control-input">
                            <form:input class="form-control es-datepicker required startDate"
                                        data-format="yyyy-mm-dd"
                                        path="createTime"/>
                        </div>

                    </div>
                    <div class="form-group">
                        <form:label path="endTime" class="control-label">结束时间：</form:label>
                        <div class="control-input">
                            <form:input class="form-control es-datepicker required returnDate"
                                        data-format="yyyy-mm-dd"
                                        path="endTime"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <form:label path="venueId" class="control-label">场馆：</form:label>
                        <div class="control-input">
                            <form:select path="venueId" cssClass="form-control required">
                                <form:options items="${venueDtos}" itemLabel="name"
                                              itemValue="id"/>
                            </form:select>
                        </div>
                    </div>
                    <div class="form-group">
                        <form:label path="venueBranchIds" class="control-label">分馆：</form:label>
                        <div class="control-input">
                            <form:select path="venueBranchIds"
                                         cssClass="form-control selectpicker show-tick show-menu-arrow my-select-alert-venue-branch required"
                                         data-live-search-placeholder="搜索"
                                         data-live-search="true"
                                         data-none-Selected-Text="请选择"
                                         multiple="true">
                                <c:forEach items="${venueBranchDtos}" var="item">
                                    <option value="${item.id}">${item.name}</option>
                                </c:forEach>
                            </form:select>
                        </div>
                    </div>
                    <div class="form-group">
                        <form:label path="exhibitorInfoTypeIds" class="control-label">展会类型：</form:label>
                        <div class="control-input">
                            <form:select path="exhibitorInfoTypeIds"
                                         cssClass="form-control selectpicker show-tick show-menu-arrow my-select-alert-type required"
                                         data-live-search-placeholder="搜索"
                                         data-live-search="true"
                                         data-none-Selected-Text="请选择"
                                         multiple="true">
                                <c:forEach items="${exhibitorTypeDtos}" var="item">
                                    <option value="${item.id}">${item.type}</option>
                                </c:forEach>
                            </form:select>
                        </div>
                    </div>
                    <div class="form-group">
                        <form:label path="description" class="control-label">描述：</form:label>
                        <div class="control-input">
                            <from:textarea path="description" cssClass="form-control text-area"/>
                        </div>
                    </div>
                    <div>
                        <button type="submit" id="submit" class="btn btn-primary" style="margin-left: 150px;">
                            <i class="icon-save icon-large"></i>提交
                        </button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            <i class="icon-arrow-left icon-large"></i>取消
                        </button>
                    </div>
                </form:form>
                <link rel="stylesheet" href="${ctxRoot}/static/vendor/bootstrap-select/css/bootstrap-select.min.css"/>
                <script src="${ctxRoot}/static/vendor/bootstrap-select/js/bootstrap-select.js"></script>
                <script src="${ctxRoot}/static/vendor/bootstrap-select/js/i18n/defaults-zh_CN.js"></script>
                <script type="text/javascript">
                    $('.my-select-alert-venue-branch').on('loaded.bs.select', function (e) {
                        let errorMsg = "${editForm.venueBranchIds}";
                        if (errorMsg != null && errorMsg != '') {
                            var arr = errorMsg;
                            if (arr.indexOf(",") != -1) {
                                arr = errorMsg.split(",");
                            }
                            $('.my-select-alert-venue-branch').selectpicker('val', arr);
                        }
                    });

                    $('.my-select-alert-type').on('loaded.bs.select', function (e) {
                        let errorMsg = "${editForm.exhibitorInfoTypeIds}";
                        if (errorMsg != null && errorMsg != '') {
                            var arr = errorMsg;
                            if (arr.indexOf(",") != -1) {
                                arr = errorMsg.split(",");
                            }
                            $('.my-select-alert-type').selectpicker('val', arr);
                        }
                    });

                    $('.startDate').datepicker({
                        language: 'zh-CN',
                        format: "yyyy-mm-dd",
                        autoclose: true,
                        clearBtn: true,
                        minuteStep: 10,
                        minView: 5,
                        startDate: new Date(),
                    }).on('changeDate', function (ev) {
                        var startDate = $('.startDate').val();
                        $(".returnDate").datepicker('setStartDate', startDate);
                        $(".startDate").datepicker('hide');
                    });

                    $('.returnDate').datepicker({
                        language: 'zh-CN',
                        format: "yyyy-mm-dd",
                        autoclose: true,
                        clearBtn: true,
                        minuteStep: 10,
                        minView: 5,
                        startDate: new Date(),
                    }).on('changeDate', function (ev) {
                        var returnDate = $(".returnDate").val();
                        $(".startDate").datepicker('setEndDate', returnDate);
                        $(".returnDate").datepicker('hide');
                    });
                </script>
            </div>
        </div>
    </div>
</div>
<%
    response.setHeader("Content-Type", "text/plain");
    JsonDialog dialog = new JsonDialog();
    dialog.setHtml(out.toString());
    JsonObject json = JsonObject.dialog(dialog);
    ObjectMapper mapper = new ObjectMapper();
    mapper.writeValue(response.getWriter(), json);
%>

controller层代码：

@RequestMapping("edit_exhibitorInfo")
    public void editExhibitorsInfo(Long id, ExhibitorInfoEditForm editForm, Model model) {
        if (id != null) {
            model.addAttribute("editForm", organizerService.queryExhibitorInfo(id));
        } else {
            model.addAttribute("editForm", editForm);
        }
//查询场馆的信息
        List<VenueDto> venueDtos = new ArrayList<VenueDto>();
        venueDtos.add(new VenueDto(organizerService.getVenue()));
        model.addAttribute("venueDtos", venueDtos);
//查询展会类型的信息
        List<ExhibitorTypeDto> exhibitorTypeDtos = organizerService.getTbExihibitorTypes();
//查询分馆的信息
        List<VenueBranchDto> venueBranchDtos = organizerService.getVenueBranch();
        model.addAttribute("exhibitorTypeDtos", exhibitorTypeDtos);
        model.addAttribute("venueBranchDtos", venueBranchDtos);
    }

@RequestMapping("save_exhibitorInfo")
    public String saveOrganizer(ExhibitorInfoEditForm editForm, HttpSession session) {
        try {
            organizerService.saveExhibitorInfo(editForm);
            saveSuccess(session, "保存成功");
        } catch (BusinessLogicException e) {
            saveError(session, e.getMessage());
        }
        return redirect("/organizer/exhibitorInfoListing.do?type=organizer");
    }

service层：

public void saveExhibitorInfo(ExhibitorInfoEditForm editForm) {
        TbExhibitorInfo exhibitorInfo = null;
        if (editForm.getId() != null) {
            exhibitorInfo = exhibitorInfoJpaRepository.findOne(editForm.getId());
            if (!exhibitorInfo.getExhibitorInfoTypeIds().equals(editForm.getExhibitorInfoTypeIds())) {
                QTbExhibitorInfoExhTypeRel qTbExhibitorInfoExhTypeRel = QTbExhibitorInfoExhTypeRel.tbExhibitorInfoExhTypeRel;
                List<TbExhibitorInfoExhTypeRel> tbExhibitorInfoExhTypeRels = exhibitorInfoExhTypeRelLongJpaRepository.query()
                        .from(qTbExhibitorInfoExhTypeRel)
                        .where(qTbExhibitorInfoExhTypeRel.exhibitorInfo.id.eq(exhibitorInfo.getId()))
                        .select(qTbExhibitorInfoExhTypeRel)
                        .fetch();
                if (tbExhibitorInfoExhTypeRels.size() != 0) {
                    for (TbExhibitorInfoExhTypeRel exhibitorInfoExhTypeRel : tbExhibitorInfoExhTypeRels) {
                        exhibitorInfoExhTypeRelLongJpaRepository.delete(exhibitorInfoExhTypeRel);
                    }
                }
                List<String> typeIdList = Arrays.asList(editForm.getExhibitorInfoTypeIds().split(","));
                for (String typeId : typeIdList) {
                    TbExhibitorInfoExhTypeRel exhibitorInfoExhTypeRel = new TbExhibitorInfoExhTypeRel();
                    TbExhibitorType exhibitorType = exhibitorTypeLongJpaRepository.findOne(Long.parseLong(typeId));
                    exhibitorInfoExhTypeRel.setExhibitorInfo(exhibitorInfo);
                    exhibitorInfoExhTypeRel.setExhibitorType(exhibitorType);
                    exhibitorInfoExhTypeRelLongJpaRepository.save(exhibitorInfoExhTypeRel);
                }
            }
            if (!exhibitorInfo.getVenueBranchIds().equals(editForm.getVenueBranchIds())) {
                QTbExhibitorInfoVenueBranchRel qTbExhibitorInfoVenueBranchRel = QTbExhibitorInfoVenueBranchRel.tbExhibitorInfoVenueBranchRel;
                List<TbExhibitorInfoVenueBranchRel> tbExhibitorInfoVenueBranchRels = exhibitorInfoVenueBranchRelLongJpaRepository.query()
                        .from(qTbExhibitorInfoVenueBranchRel)
                        .where(qTbExhibitorInfoVenueBranchRel.exhibitorInfo.id.eq(exhibitorInfo.getId()))
                        .select(qTbExhibitorInfoVenueBranchRel)
                        .fetch();
                if (tbExhibitorInfoVenueBranchRels.size() != 0) {
                    for (TbExhibitorInfoVenueBranchRel exhibitorInfoVenueBranchRel : tbExhibitorInfoVenueBranchRels) {
                        exhibitorInfoVenueBranchRelLongJpaRepository.delete(exhibitorInfoVenueBranchRel);
                    }
                }
                List<String> branchIdList = Arrays.asList(editForm.getVenueBranchIds().split(","));
                for (String branchId : branchIdList) {
                    TbExhibitorInfoVenueBranchRel exhibitorInfoVenueBranchRel = new TbExhibitorInfoVenueBranchRel();
                    TbVenueBranch venueBranch = venueBranchLongJpaRepository.findOne(Long.parseLong(branchId));
                    exhibitorInfoVenueBranchRel.setExhibitorInfo(exhibitorInfo);
                    exhibitorInfoVenueBranchRel.setVenueBranch(venueBranch);
                    exhibitorInfoVenueBranchRelLongJpaRepository.save(exhibitorInfoVenueBranchRel);
                }
            }

            if (null != editForm.getName()) {
                exhibitorInfo.setName(editForm.getName());
            }
            if (null != editForm.getCreateTime()) {
                exhibitorInfo.setCreateTime(editForm.getCreateTime());
            }
            if (null != editForm.getDescription()) {
                exhibitorInfo.setDescription(editForm.getDescription());
            }
            if (null != editForm.getEndTime()) {
                exhibitorInfo.setEndTime(editForm.getEndTime());
            }
            if (null != editForm.getVenueId()) {
                TbVenue venue = venueLongJpaRepository.findOne(editForm.getVenueId());
                exhibitorInfo.setVenue(venue);
            }
            if (null != editForm.getExhibitorInfoTypeIds()) {
                exhibitorInfo.setExhibitorInfoTypeIds(editForm.getExhibitorInfoTypeIds());
            }
            if (null != editForm.getVenueBranchIds()) {
                exhibitorInfo.setVenueBranchIds(editForm.getVenueBranchIds());
            }
            TbAuditStatus tbAuditStatus = getTbAuditStatus(1l);
            exhibitorInfo.setAuditState(tbAuditStatus);
            exhibitorInfoJpaRepository.save(exhibitorInfo);

        } else {
            exhibitorInfo = new TbExhibitorInfo();
            if (null != editForm.getName()) {
                exhibitorInfo.setName(editForm.getName());
            }
            if (null != editForm.getCreateTime()) {
                exhibitorInfo.setCreateTime(editForm.getCreateTime());
            }
            if (null != editForm.getDescription()) {
                exhibitorInfo.setDescription(editForm.getDescription());
            }
            if (null != editForm.getEndTime()) {
                exhibitorInfo.setEndTime(editForm.getEndTime());
            }
            if (null != editForm.getVenueId()) {
                TbVenue venue = venueLongJpaRepository.findOne(editForm.getVenueId());
                exhibitorInfo.setVenue(venue);
            }
            if (null != editForm.getExhibitorInfoTypeIds()) {
                exhibitorInfo.setExhibitorInfoTypeIds(editForm.getExhibitorInfoTypeIds());
            }
            if (null != editForm.getVenueBranchIds()) {
                exhibitorInfo.setVenueBranchIds(editForm.getVenueBranchIds());
            }
            TbAuditStatus tbAuditStatus = getTbAuditStatus(1l);
            TbExhibitorStatus tbExhibitorStatus = getTbExhibitorStatus(1l);
            exhibitorInfo.setAuditState(tbAuditStatus);
            exhibitorInfo.setExhibitorState(tbExhibitorStatus);
            exhibitorInfoJpaRepository.save(exhibitorInfo);
            TbOrganizer organizer = userService.findOrganizerByUserId(securityService.getLoginUser().getId());
            exhibitorInfo.setOrganizer(organizer);
            if (null != editForm.getExhibitorInfoTypeIds()) {
                List<String> typeIdList = Arrays.asList(editForm.getExhibitorInfoTypeIds().split(","));
                for (String typeId : typeIdList) {
                    TbExhibitorInfoExhTypeRel exhibitorInfoExhTypeRel = new TbExhibitorInfoExhTypeRel();
                    TbExhibitorType exhibitorType = exhibitorTypeLongJpaRepository.findOne(Long.parseLong(typeId));
                    exhibitorInfoExhTypeRel.setExhibitorInfo(exhibitorInfo);
                    exhibitorInfoExhTypeRel.setExhibitorType(exhibitorType);
                    exhibitorInfoExhTypeRelLongJpaRepository.save(exhibitorInfoExhTypeRel);
                }
            }
            if (null != editForm.getVenueBranchIds()) {
                List<String> branchIdList = Arrays.asList(editForm.getVenueBranchIds().split(","));
                for (String branchId : branchIdList) {
                    TbExhibitorInfoVenueBranchRel exhibitorInfoVenueBranchRel = new TbExhibitorInfoVenueBranchRel();
                    TbVenueBranch venueBranch = venueBranchLongJpaRepository.findOne(Long.parseLong(branchId));
                    exhibitorInfoVenueBranchRel.setExhibitorInfo(exhibitorInfo);
                    exhibitorInfoVenueBranchRel.setVenueBranch(venueBranch);
                    exhibitorInfoVenueBranchRelLongJpaRepository.save(exhibitorInfoVenueBranchRel);
                }
            }
        }
    }

数据库中是添加了多选的类型的字段，作为一个string类型的存储，存进去也是字符串，每个不同的值是以逗号隔开