基于bootstrap实现下拉框搜索功能
由于项⽬中下拉项内容太多，所以需要⽤到搜索功能，因此⽤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 = ElementById(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){
bootstrap项目
  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（）就可以了。
直接动态加载也可以
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');
}
}
})
}
官⽹  api    silviomoreto.github.io/bootstrap-select/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。