Bootstrap 穿梭框或双选框使用

• 先引入css和js

• html 添加以下代码
  <div class="ue-container">
  <select style="height: 100%" multiple="multiple"
  size="10" name="doublebox" class="demo">
  </select>
  </div>

• 添加样式
  <style>
  .ue-container {
  width: 100%;
  margin: 0 auto;
  margin-top: 1%;
  padding: 20px 30px;
  border: 1px solid #ddd;
  background: #fff;
  }
  </style>

• js代码

   Common.ajax({
    type: "GET",
    dataType: 'json',
    url: "/sys/user/getUnownedRoles",
    data:{userId:SysUser.userId},
    success: function (data) {
        if (data.code==0) {
            $.each(data.resultList,function (i,val) {
                var role={};
                role.roleId = val.roleId;
                role.roleName = val.roleName;
                roles.push(role);
            });
  
            $('.ue-container').empty();
            $(".ue-container").append("<select style='height: 100%' multiple='multiple' size='10' name='doublebox' class='demo'> </select>");
            $('.demo').doublebox({
                nonSelectedListLabel: '选择角色',
                selectedListLabel: '授权用户角色',
                preserveSelectionOnMove: 'moved',
                moveOnSelect: false,
                nonSelectedList:roles,
                selectedList:MyRoles,
                optionValue:"roleId",
                optionText:"roleName",
                doubleMove:true
            });
            $("#roleModal").modal('show');
        } else {
            layer.msg(data.message,{icon:5});
        }
    }
    });
  

• 保存js

  function assign() {
    var roles = [];
$("#bootstrap-duallistbox-selected-list_doublebox option").each(function(){
    //遍历所有option
    var role ={roleId:$(this).val(),userId:SysUser.userId};
    roles.push(role);
});
var user ={};
user.userId = SysUser.userId;
user.userRoleList = roles;
      Common.ajax({
    type:"POST",
    url:"/sys/user/roleAssign",
    data: JSON.stringify(user),//对象转json
    dataType:"json",
    contentType: 'application/json',
          traditional: true, //必须有,阻止深度序列化
    success: function(data){
              if (data.code==0) {
                layer.msg(data.message,{icon:1,time:1000}, function() {
                $("#roleModal").modal('hide');
            });

        } else {
            layer.msg(data.message,{icon:5});
        }
    }
});
}