Explication détaillée de l'utilisation du plug-in de recherche déroulante bootstrap

bootstrap-select est un plug-in de recherche déroulant pour le démarrage Lorsque nous l'utilisons, nous devons parfois charger dynamiquement des données dynamiques depuis l'arrière-plan ou directement. Ce qui suit est une méthode de liaison de deuxième niveau chargée dynamiquement basée sur le menu déroulant de premier niveau. (Pas d'acquisition en arrière-plan ajax) Cet article présente principalement en détail l'utilisation du plug-in de recherche déroulante de sélection d'amorçage et le lien secondaire de chargement dynamique de vos propres données, qui ont une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Introduisez d'abord les fichiers js et css (un css et deux js)

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

js Omettre

1. Recherche déroulante (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>

2. Charger les données Linkage niveau 2 (js)

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

Recommandations associées :

Utilisez Css+jQuery pour créer un menu déroulant

Un exemple de tutoriel du menu déroulant Bootstrap

Un exemple de tutoriel du menu déroulant du bouton Bootstrap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!