由于项目中下拉项内容太多，所以需要用到搜索功能，因此用bootstrap的下拉可以完美实现
<div class="field-group">
<select class="form-control" id="sel_pcType" data-live-search="true">
<option value="" >第一项</option>
</select>
</div>
首先我需要从后台取到下拉的内容添加到select中
封装添加option的函数
function addOptions(container,list,value,desc) {
var selectObj = document.getElementById(container);
if(selectObj){
var length = list.length;
for ( var i = 0; i < length; i++) {
var obj = list[i];
var op = new Option(obj[desc],obj[value]);
selectObj.options.add(op);
}
}
}
获取后台数据
后台1.后台2(传参数,function(datas){
if(datas && datas.length > 0){
addOptions("sel_pcType",datas,"ddValue","ddDesc");
添加option以后
$('#sel_pcType').selectpicker();
}
}
就可以实现下拉和搜索了，这里主要是$('#sel_pcType').selectpicker()要在添加完option以后实现，并且配合data-live-search="true"属性来整体实现
如果是前端写死的option 那么不用这么麻烦只要class="selectpicker show-tick form-control" data-live-search="true" 属性直接写在select标签上就可以实现了 ，需要多选 添加multiple属性即可。
获取值的话$('#sel_pcType').val（）就可以了。
讲解了其他使用内容链接 https://www.cnblogs.com/landeanfen/p/7457283.html#_label1
直接动态加载也可以
function getOption
(obj) {
$.ajax({
type:
'get'
,
url: 地址
,
success:
function
(data) {
if
(data) {
$.each(data,
function
(i, n) {
$(
"#"
+ obj).append(
" <option value=\""
+ n.id +
"\">"
+ n.text +
"</option>"
);
})
$(
"#"
+ obj).selectpicker(
'refresh'
);
}
}
})
}