使用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>