bootstrap-select selectpicker 下拉寬度設置

一 背景

　　在頁面展示中使用bootstrap-select下拉框時，會遇到一些情況導致展示的下拉寬度有些不合適。如：下拉文本框寬度或下拉選擇框寬度過寬。

二 問題

　　首先要引入相關的js和css　　

　　1.下拉文本框寬度

　　　　想要固定“下拉文本框寬度”在 select 標簽內加入 data-width="180px" ，則寬度固定在180px

　　2.下拉選擇框寬度

　　　　2.1想要固定“下拉選擇框寬度”在 select 標簽內加入 data-maxwidth="180" ，則寬度固定在180px

　　　　2.2想要固定“下拉選擇框寬度”在 selectpicker中設置width的值。（如果2.1無效的話）

 

 <select id="address" name="address" data-style="btn-light" class="selectpicker"
                                                    placeholder="請選擇" data-live-search="true" data-maxwidth="180" data-width="180px" ></select>

 

    var obj = $("#" + id);
    obj.selectpicker({
        actionsBox: false,
        liveSearch: true,
        width: width,//"auto" "200px" 
        size: 7
    });
　　//下拉內容初始化

　　$.each(data, function (i) {
　　　　if(data[i].hName!=null){
　　　　　　$(obj).append("<option value=" + data[i].hLid + " data-subtext='(" + data[i].hCode + ")'>" + data[i].hospitalName + "</option>");
　　　　}
　　});
　  obj.selectpicker('refresh');
　　obj.selectpicker('render');

 

三 插件

　　如果還是沒有效果可以替換成我的插件試下，我好像以前改過一點，

　　https://files.cnblogs.com/files/tong2018/bootstrap-select.zip