Bootstrap select下拉显示不完整修复

最新推荐文章于 2023-01-05 15:52:14 发布

zcyang57

最新推荐文章于 2023-01-05 15:52:14 发布

阅读量2.4k

点赞数

分类专栏：前端文章标签： Bootstrap select

本文链接：https://blog.csdn.net/baidu_22195437/article/details/93372204

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

//html dom
<select id="selectid" class="selectpicker" multiple data-live-search="true"><option value="">全部</option>...</select >

//组件初始化
$("#selectid").selectpicker({'dropupAuto': false});
$("#selectid").selectpicker('val', ['']);
$('#selectid').selectpicker('refresh');

//下拉选在页面最底部且页面可以滚动可能会出现下拉展示不全问题
$("button[data-id$='"+selectid+"']").click(function() {
   if ($(this).next("div").css("display") == "none") { //展开下拉框
       if ($(this).next("div").children("div[class=bs-searchbox]").length > 0) {//下拉框包含搜索区域
           var oldMaxH = $(this).next("div").find("ul[role=listbox]").css("max-height");
           if (oldMaxH != "none") {
               oldMaxH = oldMaxH.replace("px", "");
               $(this).next("div").find("ul[role=listbox]").css("max-height", parseInt(oldMaxH) - 25); //设置ul的最大高度防止最后一天数据被遮住滚动条也滚不下去
           }
       }
       var _maxZH = $(this).next("div").css("max-height"); //外层div最大高度
       var _minZH = $(this).next("div").css("min-height"); //ul最大高度
       var _maxZH2 = $(this).next("div").find("ul[role=listbox]").css("max-height");
       var _minZH2 = $(this).next("div").find("ul[role=listbox]").css("min-height");
       _maxZH = (_maxZH == "none") ? 0 : parseInt(_maxZH.replace("px", ""));
       _minZH = (_minZH == "none") ? 0 : parseInt(_minZH.replace("px", ""));
       _maxZH2 = (_maxZH2 == "none") ? 0 : parseInt(_maxZH2.replace("px", ""));
       _minZH2 = (_minZH2 == "none") ? 0 : parseInt(_minZH2.replace("px", ""));
       if (_minZH > _maxZH) {
           $(this).next("div").css("max-height", _minZH + 64); //外层div最大高度为none或者最大高度小于最小高度最大高度为最小高度+64
       }
       if (_minZH2 > _maxZH2) {
           $(this).next("div").find("ul[role=listbox]").css("max-height", _minZH2 + 64); //ul最大高度为none或者最大高度小于最小高度最大高度为最小高度+60
       }
   }
});