select2多选下拉选回显的问题

公司要求是要做一个多选下拉选 , 也是自己第一次用select2这个插件 , 以前用的是layui现在用bootstrap真的是头疼,被layui宠坏了

因为没有直接按照官方的做法来,导致增加了自己的很多问题吧,但是也增进了一些自己js的能力

问题是这样的,正常显示的值应该是这样的,
可是每次刷新的时候值都会变化,我也是服了

后来通过debug发现,后台取到的值是正确的,是因为我前端的js写的问题,导致值发生了变化

就是这个res,原本是我是写了四次这个方法,然后res都是同名的,然后居然会互相影响,每次会将别的select放到我最后的trigger中去,我现在还无法理解这个问题,先记录着,如果有大佬能看到希望能帮我看看是什么原因,我把这个res改了之后就正常数据回显了

具体自己搞的流程:

html用的是springboot的引擎,并且放置一个隐藏域

<div class="control-group">
                                    <label class="control-label" for="barcodebin">条码格式</label>
                                    <div class="controls">
                                        <select name="barcodebin" id="barcodebin" multiple="multiple" class="barcodebin1">
                                            <option th:selected="${session.params['template']} !=null ? (${session.params['template']['BARCODEBIN']} eq ${template['ID']}?'true':'false'):'false'"
                                                    th:each="template:${session.params['barcodeParams']}"
                                                    th:value="${template['ID']}"
                                                    th:text="${template['PAYMENT']}!=null?${template['ID']}+'-'+${template['PAYMENT']}:''">
                                        </select>
                                        <span id="barcodebinMsg" style="color: #960004">*</span>
                                    </div>
                                    <!--存放用逗号分割的数据-->
                                    <input th:value="${session.params['template']}!=null?(${session.params['template']['BARCODEBIN']}!=null?${session.params['template']['BARCODEBIN']}:''):''"
                                           name="code" id="code" type="hidden"/>
                                </div>

js代码:用逗号分割值,并放到隐藏域中

//支付条码
    $('#barcodebin').change(function(){
        var o=document.getElementById('barcodebin').getElementsByTagName('option');
        var all="";
        for(var i=0;i<o.length;i++){
            if(o[i].selected){
                all+=o[i].value+",";
            }
        }

        all = all.substr(0, all.length - 1);
        $("#code").val(all);
    })

数据回显的控制器

//数据回显条码格式
    @RequestMapping("/findBarcodeById")
    public JSONArray findBarcodeById(HttpServletRequest request, HttpServletResponse response) {
        JSONArray jsonArray = new JSONArray();
        String code = request.getParameter("code");
        List<String> codeId = Arrays.asList(code.split(","));
        List<Object> barcodeParams = templateService.findBarcodeById(codeId);
        return JSONArray.fromObject(barcodeParams);
    }

mapper层:

mybatis的循环

<!--通过ID查询条码格式-->
  <select id="findBarcodeById" resultType="java.util.Map">
     select id,payment from ATMP_BARCODEBIN where 1 = 1
     <if test="id != null">
      and id in
      <foreach collection="id" open="(" close=")" separator="," index="index" item="id">
        #{id}
      </foreach>
     </if>
  </select>

数据回显的js就是上面截图的js
纪念一下菜鸡的成长