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;
               } 
        } 
            //
        });

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

0条评论

发表评论