bootstrap-duallistbox初始化和取值

bootstrap-duallistbox雙選列表項目地址：https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox

bootstrap-duallistbox雙選列表

效果圖如下：

如何將後臺數據進行填充，然後取出選中的值呢。且聽我娓娓道來。

 

1. HTML中引入相關JS，CSS標籤

   <!-- 加載bootstrap -->
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
               
   <!-- 加載bootstrap-dualllistbox -->
   <link rel="stylesheet" href="static/bootstrap-duallistbox/bootstrap-duallistbox.css">
   <script src="static/bootstrap-duallistbox/jquery.bootstrap-duallistbox.js"></script>
   
   
   <select id="drkj" class="form-control dual_select" multiple>
   
   </select>

    

2. AJAX請求，爲雙選框賦值

     $.ajax({
       url:  xxx/query,
       method: 'POST',
       data:{},
                 
       success: function (data) {
           var drkjSelect=$('#drkj')[0];//選擇多選框的ID
           //將獲取的數據循環遍歷創建option加入到select中
           $(data).each(function (i, o) {
   						var optionKj=document.createElement("option")
   						optionKj.value=o.id;
   						optionKj.text=o.kjmc;
   						drkjSelect.options.add(optionKj);
   					});
                  
           }
           //創建雙選對象，一定要在這裏初始化，要不然AJAX請求賦值的數據還沒有加載到雙選框內
           $('.dual_select').bootstrapDualListbox({
   						nonSelectedListLabel: '未選擇的課件',
   						selectedListLabel: '已選擇的課件',
   						filterPlaceHolder: '輸入課件名稱',
   						selectorMinimalHeight: 160,
   						infoText: '共{0}個課件',
   						infoTextFiltered: '搜索到{0}個課件 ,共{1}個課件',
   						infoTextEmpty: '列表爲空',
   	    });
       });

    

3. 獲取被選擇的值，右邊那個被選擇框的值

   //這裏的ID是右邊那個select框的ID，這是默認ID     
   
   var isselected = $("#bootstrap-duallistbox-selected-list_ option").map(function(){
               return $(this).val();
           }).get().join(",");
   //獲取的值是每個option的val加，加val
   如isselected=xx,xx,xx

    

4. 參考：https://blog.csdn.net/weixin_30501857/article/details/97632591  

5. 參考：https://www.cnblogs.com/penghq/p/9203219.html