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