select2 多选 排序(版本3.4.6)

使用select2多选,页面选择值的顺序与传到control的值的顺序不一致,为了方便,没有改变本来js文件,在页面上面通过change方法改变。

1、页面代码(添加修改使用同一个页面)

 <link rel="stylesheet" href="/js/select2/select2.css"/>

<script src="/js/jquery.min.js"></script>

<script src="/js/select2/select2.min.js" type="text/javascript"></script>

<script type="text/javascript">

var bData = [];


var bselect = $("#bIds").select2(bData);


$("#bIds").change(function(){

     $(this).children('option:selected').each(function (index, domEle) { 

                 var vv=$("#bookIds option[value='"+domEle.value+"']").val();
                  if (vv=='undefined' ) {
                  var option = $("<option>").val(domEle.value).attr("selected","true");
                 $("#bookIds").append(option);
                }
    });
    $(this).children('option:not(:selected)').each(function (index, domEle) {
           $("#bookIds option[value='"+domEle.value+"']").remove();
     });
});

<#if action =='edit'>
        var bmdata = [];
         <#list entity.bookList as m>
              bmdata.push({id:${m.id}, text: '${m.bookName}'});
             $("#bookIds").append($("<option>").val(${m.id}).attr("selected","true"));
         </#list>
           bselect.select2("data", bmdata);
</#if>

 </script>

 

<body>

<select id="bIds"  multiple="multiple" class="select" >
<#list bookList as m>
<option value="${m.id}">${m.bookName}</option>
</#list>
</select>
<select id="bookIds" multiple="multiple" style="display: none;">
</select>

</body>

 

posted on 2018-08-02 15:36  zc_成  阅读(2713)  评论(0编辑  收藏  举报

导航