我使用bootstrap-select 1.13.1
,并且在我的一个表单中,下拉菜单中的项目无法显示在屏幕上。这是图片:
如您在图像中看到的,最后一个选项不可见。在其他形式下,我没有这个问题。我也注意到当我使用.selectpicker("refresh")
时会发生这种情况。在使用刷新之前,选择菜单如下所示:
我不确定是什么原因导致.selectpicker("refresh")
进程出现此问题。在选择菜单中添加新项目或更新现有项目后,我需要使用刷新。选择菜单的width
和height
是否可以解决此问题?这是我的工作代码示例:
var appData = {
Buildings : [
{BLDGNAME : "Test 1", BLDGNUMBER : "2234"},
{BLDGNAME : "Test 2", BLDGNUMBER : "2534"},
{BLDGNAME : "Test 3", BLDGNUMBER : "2734"},
{BLDGNAME : "Test 4", BLDGNUMBER : "2294"}
]
}
$(document).ready(function(){
loadBuildings();
});
function loadBuildings(){
populateBuildings();
}
function populateBuildings(){
var fldBldg = $("select.bldg-menu");
fldBldg.find("option:gt(0)").remove(); // Remove all but the first option in select menu.
$.each(appData.Buildings, function (key, value) {
fldBldg.append($("<option></option>").val(value.BLDGNUMBER).text(value.BLDGNAME));
});
fldBldg.selectpicker("refresh");
}
$("#add").on("click",addNew);
function addNew(){
appData.Buildings.push({BLDGNAME : "Test 5", BLDGNUMBER : "6234"});
loadBuildings();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<form name="frmDemog" id="frmDemo">
<div class="form-group">
<label class="control-label" for="bldg"><span class="label label-primary">Building:</span></label>
<select class="form-control bldg-menu selectpicker" name="frmDemo_bldg" id="frmDemo_bldg" data-live-search="true" required>
<option value="">--Choose Building--</option>
</select>
</div>
</form>
在我上面的代码段中,这个问题不是问题。高度和宽度看起来不错。我想知道是否还有其他因素可能导致该问题。我的表单看起来相同,但是其中有更多字段。如果有人知道或遇到相同的问题,请告诉我您是否有解决此问题的好方法。