bootstrap-multiselect.js多选下拉框初始化时默认选中初始值

最新推荐文章于 2025-10-25 10:44:59 发布

原创最新推荐文章于 2025-10-25 10:44:59 发布 · 置顶 · 1.4w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

插件同时被 2 个专栏收录

7 篇文章

订阅专栏

bootstrap

4 篇文章

订阅专栏

本文介绍如何使用bootstrap-multiselect.js插件设置多选下拉框的默认选中项。通过重写数据加载方法，结合Map数据结构，实现特定选项的自动选中，并展示完整的JavaScript实现过程。

bootstrap-multiselect.js多选下拉框默认值设置

一、案例数据格式
这里写图片描述

二、HTML代码

<select id="msgRoles" multiple="multiple" class="validate[required]"></select>

三、原始数据加载方法

//复选下拉框
function loadMultiSelect(id, data) {
    var html = '';
    for (var i = 0; i < data.length; i++) {
        html += "<option value='" + data[i].value + "'>" + data[i].text+ "</option>";
    }
    $("#" + id).html(html);
}

四、重写数据加载方法（可判断初始化默认选中数据）

jQueryAjaxAsync("/systemRoleAction/roleListbox",null, function(res) {
        var Data = JSON.parse(res);
        console.log(Data)
        //注释了原有加载下拉框的方法
        // loadMultiSelect("msgRoles", Data);
        var myMap = new Map();
        for(var j=0;j<Data.length;j++){
            //塞入键值对
            myMap.set(Data[j].text,Data[j].value);
        }
        console.log(myMap);
        var mm=[];
        myMap.forEach(function(value, key) {
        //此部分应该获取后台初始选中的值，进行判断，给其加上selected:true属性
            if(value==100003 || value==100004){//写死的数据
             mm.push({label:key,value:value,selected:true})
            }else {
                mm.push({label:key,value:value});
            }
        })
        console.log(mm);
        $("#msgRoles").multiselect('dataprovider', mm);
        $("#msgRoles").multiselect({
            buttonWidth : '30%',
            maxHeight : 150
        });
        $('#msgRoles').multiselect('refresh');