multiple-select 单选框多选框的用法

//说明 上次做了一个项目搞好用了这个插件 怎么都没有百度出来 现在搞完了给大家分享下

                  <div class="row">
                        <div class="col-sm-11">
                            <div class="input-group">
                                <span class="input-group-addon">
					               	 角色：
					             </span>
                                <div class="form-group">
                                    <select multiple="multiple" id="selectRoles 
                                             name="rolesSelect"></select>
                                    <input name="roles" id="rolesSelect" hidden/>
                                </div>
                            </div>
                        </div>
                    </div>

首先动态获取下拉框

function initRole() {
    $.post(ctx + "role/list", {}, function (r) {
        var data = r.rows;
        var option = "";
        for (var i = 0; i < data.length; i++) {
            option += "<option value='" + data[i].roleId + "'>" + data[i].roleName + "</option>"
        }
        $rolesSelect.html("").append(option);
        var options = {
            selectAllText: '所有角色',
            allSelected: '所有角色',
            width: '100%',
            onClose: function () {
                $roles.val($rolesSelect.val());
                validator.element("input[name='roles']");
            }
        };
        $rolesSelect.multipleSelect(options);
    });
}

 一个动态的拉下款就完成了

//如果你想换成单选的下拉框 加一个下面的

function initRole() {
    $.post(ctx + "role/list", {}, function (r) {
        var data = r.rows;
        var option = "";
        for (var i = 0; i < data.length; i++) {
            option += "<option value='" + data[i].roleId + "'>" + data[i].roleName + "</option>"
        }
        $rolesSelect.html("").append(option);
        var options = {
            single: true,  //单选加入这个 如果是多选去掉即可
            width: '100%',
            onClose: function () {
                $roles.val($rolesSelect.val());
                validator.element("input[name='roles']");
            }
        };
        $rolesSelect.multipleSelect(options);
    });
}

//下面是最重要的就是数据的回显 之前搞了我一天 多选的回显

  //数组
 var roleArr = [];
             //user.roleIds 回显的值 因为多选所有这一块要拆分一下
            for (var i = 0; i < user.roleIds.length; i++) {
                roleArr.push(user.roleIds[i]);
            }

       //数据的回显           
     $form.find("select[name='rolesSelect']").multipleSelect('setSelects', roleArr);
  //数据的选中     
$form.find("input[name='roles']").val($form.find("select[name='rolesSelect']").val());

//单选的回显

   //动态回显下拉框回显 赋值的时候一定要注意的是[] 这个框 之前一直没有加这个导致一直回显不了
            $("select[name='rolesSelect']").multipleSelect('setSelects',[user.roleID]);
            //动态下拉框回显以后赋值     
     $form.find("input[name='roles']").val($form.find("select[name='rolesSelect']").val());