bootstrap下拉列表实现多选、反选功能

bootstrap下拉列表实现多选、反选功能

      博主今天在实现一个功能需求，需要用到bootstrap下拉列表多选框实现反选功能，博主也特意去百度了一下，结果什么都没有，只能自己通过方法实现，下面将这个方法分享给大家，代码也很简单。

      我们首先构造下拉列表框，并且实现多选功能，我们要用一个隐藏的input来存放我们勾选的数据，页面代码如下：

<div class='form-group'>
    <select class='selectpicker'  style='border-radius:5px;' autocomplete='off' 
    id='partyBInfoName' data-live-search='true' multiple 
    title='--请选择下游渠道--'>  
        <option value='1'>1</option>
        <option value='2'>2</option>
        <option value='3'>3</option>
        <option value='4'>4</option>
        <option  value='5'>5</option>
    </select>
</div>
<input type='hidden' class='form-control' id='channelUserIds' name='channelUserIds' 
style='border-radius:5px' autocomplete='off'>

       然后是js部分，代码如下：

/**初始化下拉选择框**/
$('.selectpicker').selectpicker('refresh');  
$('.selectpicker').selectpicker('render');
//选中赋值
$("#channelUserId").change(function(){
    $("input[name=channelUserIds]").val($("#channelUserId").val());
})

      完成以上操作，我们便可以实现多选功能，然后便是实现反选功能，我们先构造一个反选的按钮，代码如下：

<button type='button' class='btn btn-primary' id='reverseElection'>反选</button>

       赋予他反选的功能，代码如下：

$('#reverseElection').on('click', function () {
            //置空已经选择
            $("input[name=channelUserIds]").val('');
            //
            var useSelect = $("#channelUserId").val();
            //【修改选中状态】
            var obj=document.getElementById("channelUserId");
            for(i=0;i<obj.length;i++) {
               if(obj[i].selected!=true) {
                   obj[i].selected = true;
　　　　　　   }else{
                   obj[i].selected = false;
               } 
　　　　    }
            //重刷渲染 
            $('.selectpicker').selectpicker('render');
            //反选赋值
            for(i=0;i<obj.length;i++) {
               if(obj[i].selected==true) {
                   $("input[name=channelUserIds]").val($("#channelUserId").val());
                   obj[i].selected = true;
　　　　　　   }else{
                   obj[i].selected = false;
               } 
　　　　    } 
            //
        });

       这样我们便可以实现下拉列框实现多选、反选功能。