关于bootstrap框架中select2的多选问题

淩亂°似流年 2022-06-01 23:51 793阅读 0赞

**1.类似普通select 标签一样**

唯一区别就是多啦 **multiple=****"multiple"** 这个属性（用来标识该下拉选择框是个多选的）

**2.项目当中必须有引入外部js 和 css样式**

bootstrap-multiselect.css  
bootstrap-multiselect.js

网上都有实在找不到，直接联系我。

**3.页面需要添加js代码**

//页面加载完毕之后初始化该多选下拉框，以及设置默认选项

$(document).ready(function () {
    
        $("#user_Level").multiselect({
            nonSelectedText:"-----请选择代理人级别-----",
            buttonWidth:"100%"
        });

});

**4.当选择完毕如何获取选中的值(我的是提交表单的事件中加如下js代码)**

var str = "";
    $("#user_Level option:selected").each(function () {
        if (str != "") {
            str += ",";
        }
        str += $(this).val();
    });

如果你选择‘VIP’和‘管理人员’，那么你的 str=“10,20”以字符串形式拼接，传递后台之后处理(储存数据库)

**5.当编辑该选项的时候数据的回显也是一个问题**

我没有想出更好的办法所以在数据回显的时候我在标签上加了id

我通过隐藏域拿到后台的数据之后，我利用js做判断比对

`$(document).ready(function () {`

//通过隐藏域id获取到后台传递的值 和select标签值对比选中
        var user_l = $("#u_level").val();
        if(user_l == '*'){
            $("#o1").attr("selected","selected");
            $("#o2").attr("selected","selected");
            $("#o3").attr("selected","selected");
        }else if(user_l == '10,20'){
            $("#o1").attr("selected","selected");
            $("#o2").attr("selected","selected");
        }else if(user_l == '20,30'){
            $("#o2").attr("selected","selected");
            $("#o3").attr("selected","selected");
        }else if(user_l == '10'){
            $("#o1").attr("selected","selected");
        }else if(user_l == '20'){
            $("#o2").attr("selected","selected");
        }else if(user_l == '30'){
            $("#o3").attr("selected","selected");
        }

//然后在初始化这个多选标签
        $("#user_Level").multiselect({
            nonSelectedText:"-----请选择代理人级别-----",
            buttonWidth:"100%"
        });

});

最好获取选中的值方法和上面一致。

**如有披露或问题欢迎留言或者入群探讨**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDcwNzMz_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDcwNzMz_size_16_color_FFFFFF_t_70]: /images/20220602/4b401c40b6f645ec92c0a1b13425476f.png