Detailed explanation of how to use bootstrap select drop-down search plug-in

bootstrap-select is a pull-down search plug-in for boot. When using it, we sometimes need to dynamically load dynamic data from the background or directly.
The following is the dynamic loading of the second-level linkage method according to the first-level drop-down menu. (not ajax background acquisition)

First introduce js and css files (one css and two js)

<link rel="stylesheet" href="css/" rel="external nofollow" >

js omitted

1. Pull-down search (html)

&lt;select class="selectpicker" data-live-search="true" &gt;
  &lt;option value="-1"&gt;Please select&lt;/option&gt;
  &lt;option value="0"&gt;0&lt;/option&gt;
  &lt;option value="1"&gt;1&lt;/option&gt;
  &lt;option value="2"&gt;2&lt;/option&gt;
  &lt;option value="3"&gt;3&lt;/option&gt;
&lt;/select&gt;
&lt;select class="selectpicker" data-live-search="true" &gt;
  &lt;option value="-1"&gt;Please select&lt;/option&gt;
&lt;/select&gt;

2. Loading data Secondary linkage (js)

function smallScreen(){   // The spacing processing of personal items can be omitted  if($(window).width()&lt;768){
    $('.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn)').css({
      'width':'100%',
      'margin-top':'10px'
    });
  }
}
$(function(){
var erji=[
    ['Haidian District','Dongcheng District','Xicheng District'], // 0
    ['Pudong District','Jinshan District','Huangpu District'], // 1
    ['Taizhou City','Hangzhou City','Ningbo City','Jiaxing City'], // 2
    ['Zhengzhou City','Luoyang City','Kaifeng City'] // 3
  ];
  var yuan = '&lt;li data-original-index="-1" class&gt;' +   // String stitching      '&lt;a tabindex="0" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"&gt;' +
      '&lt;span class="text"&gt;Please select&lt;/span&gt;' +
      '&lt;span class="glyphicon glyphicon-ok check-mark"&gt;&lt;/span&gt;' +
      '&lt;/a&gt;' +
      '&lt;/li&gt;';
  $('#d1').change(function(){ // First-level drop-down menu option changes event    if($(this).val() === '-1'){
      $('#d2').prev('-menu').find('ul').html(yuan);
      $('#d2').html('<option>Please select </option>');      $('.selectpicker').selectpicker('refresh');
      smallScreen();
      return;
    }
    var cityIndex = erji[  ]; // The current subscript is at the second level corresponding content    var html = '&lt;li data-original-index="-1" class&gt;' +   // Pull down to search for dynamically loaded tags        '&lt;a tabindex="0" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"&gt;' +
        '&lt;span class="text"&gt;Please select&lt;/span&gt;' +
        '&lt;span class="glyphicon glyphicon-ok check-mark"&gt;&lt;/span&gt;' +
        '&lt;/a&gt;' +
        '&lt;/li&gt;';
    var erjiOption = '&lt;option value="0"&gt;Please select&lt;/option&gt;';  // Colleagues add option    for(var i = 0;i&lt;;i++){
      html+= '&lt;li data-original-index='+i+'&gt;' +
          '&lt;a tabindex="0" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"&gt;' +
          '&lt;span class="text"&gt;'+cityIndex[i]+'&lt;/span&gt;' +
          '&lt;span class="glyphicon glyphicon-ok check-mark"&gt;&lt;/span&gt;' +
          '&lt;/a&gt;' +
          '&lt;/li&gt;';  // For compatible with ie, string splicing is used instead of ES6 template strings.      // Add option      erjiOption += '&lt;option value='+i+'&gt;'+cityIndex[i]+'&lt;/option&gt;';
    }
    $('#d2').prev('-menu').find('ul').html(html);
    $('#d2').html(erjiOption);
    $('.selectpicker').selectpicker('refresh');
    smallScreen();
  });
});
});

Personal use is valid.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.