一 背景
在页面展示中使用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,//"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