bootstrap select下拉搜索插件使用方法详解

bootstrap-select是boot的下拉搜索插件，使用的时候有时我们需要动态从后台 或者 直接加载动态数据。
下面是根据一级下拉菜单，动态加载二级联动方式。（不是ajax后台获取）

首先引入js与css文件（一个css两个js）

<link rel=\"stylesheet\" href=\"css/bootstrap-select.css\" rel=\"external nofollow\" >

js省略

一、下拉搜索（html）

<select class=\"selectpicker\" data-live-search=\"true\" id=\"d1\">
  <option value=\"-1\">请选择</option>
  <option value=\"0\">0</option>
  <option value=\"1\">1</option>
  <option value=\"2\">2</option>
  <option value=\"3\">3</option>
</select>
<select class=\"selectpicker\" data-live-search=\"true\" id=\"d2\">
  <option value=\"-1\">请选择</option>
</select>

二、加载数据 二级联动（js）

function smallScreen(){   // 个人项目中间距处理，可以省略
  if($(window).width()<768){
    $(\'.bootstrap-select:not([class*=\"col-\"]):not([class*=\"form-control\"]):not(.input-group-btn)\').css({
      \'width\':\'100%\',
      \'margin-top\':\'10px\'
    });
  }
}
$(function(){
var erji=[
    [\'海淀区\',\'东城区\',\'西城区\'], // 0
    [\'浦东区\',\'金山区\',\'黄埔区\'], // 1
    [\'台州市\',\'杭州市\',\'宁波市\',\'嘉兴市\'], // 2
    [\'郑州市\',\'洛阳市\',\'开封市\'] // 3
  ];
  var yuan = \'<li data-original-index=\"-1\" class>\' +   // 字符串拼接
      \'<a tabindex=\"0\" data-tokens=\"null\" role=\"option\" aria-disabled=\"false\" aria-selected=\"false\">\' +
      \'<span class=\"text\">请选择</span>\' +
      \'<span class=\"glyphicon glyphicon-ok check-mark\"></span>\' +
      \'</a>\' +
      \'</li>\';
  $(\'#d1\').change(function(){  // 一级下拉菜单选项改变事件
    if($(this).val() === \'-1\'){
      $(\'#d2\').prev(\'div.dropdown-menu\').find(\'ul\').html(yuan);
      $(\'#d2\').html(\'<option>请选择</option>\');
      $(\'.selectpicker\').selectpicker(\'refresh\');
      smallScreen();
      return;
    }
    var cityIndex = erji[ this.value ]; // 当前下标在二级对应内容
    var html = \'<li data-original-index=\"-1\" class>\' +   // 下拉搜索动态加载成的标签
        \'<a tabindex=\"0\" data-tokens=\"null\" role=\"option\" aria-disabled=\"false\" aria-selected=\"false\">\' +
        \'<span class=\"text\">请选择</span>\' +
        \'<span class=\"glyphicon glyphicon-ok check-mark\"></span>\' +
        \'</a>\' +
        \'</li>\';
    var erjiOption = \'<option value=\"0\">请选择</option>\';  // 同事添加option
    for(var i = 0;i<cityIndex.length;i++){
      html+= \'<li data-original-index=\'+i+\'>\' +
          \'<a tabindex=\"0\" data-tokens=\"null\" role=\"option\" aria-disabled=\"false\" aria-selected=\"false\">\' +
          \'<span class=\"text\">\'+cityIndex[i]+\'</span>\' +
          \'<span class=\"glyphicon glyphicon-ok check-mark\"></span>\' +
          \'</a>\' +
          \'</li>\';  // 此处为了兼容ie，采用的字符串拼接而不是ES6的模板字符串。
      // 添加option
      erjiOption += \'<option value=\'+i+\'>\'+cityIndex[i]+\'</option>\';
    }
    $(\'#d2\').prev(\'div.dropdown-menu\').find(\'ul\').html(html);
    $(\'#d2\').html(erjiOption);
    $(\'.selectpicker\').selectpicker(\'refresh\');
    smallScreen();
  });
});
});

个人使用有效。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。