bootstrap-select:
官网:https://www.bootstrapselect.cn/
引入样式:
<link href="~/js/lib/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
引入js:
<script src="~/js/lib/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="~/js/lib/bootstrap-select/js/i18n/defaults-zh_CN.min.js"></script>
使用:
在select 中加class="selectpicker"
宽度设置: select 中加 data-width="100%"
加搜索: select 中加 data-live-search="true"
例:
<select class="selectpicker " name="qId" id="qId" placeholder="请选择单位所在区" data-width="100%" data-live-search="true">
<option value="">请选择单位所在区</option>
</select>
动态加载option项:$(".selectpicker").selectpicker('refresh');
例:
var option = '<option value="">请选择单位所在区</option>'
$.each(resData.data, function (index, item) {
option += '<option value="' + item.id + '">' + item.name + '</option>';
})
$("#qId").html('');
$("#qId").html(option);
if (isEdit) {
$("#qId").val(itemData.qId);
}
$(".selectpicker").selectpicker('refresh');
网友评论