Exemple d'utilisation de la liste déroulante selectpicker dans bootstrap-js tutoriel-php.cn

Exemple d'utilisation de la liste déroulante selectpicker dans bootstrap

亚连

Libérer： 2019-11-23 11:07:28

original

10467 Les gens l'ont consulté

Cet article vous présente principalement les informations pertinentes sur l'utilisation de la liste déroulante selectpicker dans bootstrap. L'article la présente de manière très détaillée à travers des exemples. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de chacun. il peut apprendre ensemble.

Préface

J'ai utilisé bootstrap récemment et j'ai écrit quelques articles de blog pour l'enregistrer. . . .

bootstrap selectpicker est un composant de liste déroulante relativement simple dans bootstrap. L'effet est le suivant :

Ci-joint est le. Lien API du site officiel, http://silviomoreto.github.io/bootstrap-select/.

Manuel recommandé :Manuel chinois Bootstrap

Les opérations de base pour utiliser les listes déroulantes sont généralement : la sélection radio, la sélection multiple, la recherche floue, l'affectation dynamique, etc. Voyons comment l'utiliser :

La méthode d'utilisation est la suivante

1 Les CSS et js qui doivent être introduits en premier :

bootstrap.css
bootstrap-select.min.css
jquery-1.11.3.min.js
bootstrap.min.js
bootstrap-select.min.js

Copier après la connexion

. 2. Le code js est le suivant :

$(function() { 
  $(".selectpicker").selectpicker({ 
   noneSelectedText : &#39;请选择&#39;//默认显示内容 
  });

Copier après la connexion

//数据赋值 
var select = $("#slpk"); 
select.append("<option value=&#39;1&#39;>香蕉</option>"); 
select.append("<option value=&#39;2&#39;>苹果</option>"); 
select.append("<option value=&#39;3&#39;>橘子</option>"); 
select.append("<option value=&#39;4&#39;>石榴</option>"); 
select.append("<option value=&#39;5&#39;>棒棒糖</option>"); 
select.append("<option value=&#39;6&#39;>桃子</option>"); 
select.append("<option value=&#39;7&#39;>陶子</option>");

Copier après la connexion

//初始化刷新数据 
 $(window).on(&#39;load&#39;, function() { 
  $(&#39;.selectpicker&#39;).selectpicker(&#39;refresh&#39;); 
 }); 
});

Copier après la connexion

3. Contenu jsp :

<select id="slpk" class="selectpicker" data-live-search="true" multiple></select>

Copier après la connexion

Lorsque plusieurs sont défini, il est multi-sélection, et lorsque data-live-search="true", l'affichage est flou. La zone de recherche ne sera pas affichée si elle n'est pas définie ou égale à false.

Articles connexes recommandés :
1.Utiliser le contrôle de sélection d'amorçage
2.Comment utiliser la zone de sélection multiple déroulante de bootstrap
Recommandations vidéo associées :
1.JavaScript Quick Start_Jade Girl Heart Sutra Series

4. Autres méthodes :

Obtenir l'élément sélectionné :

var selectedValues = [];  
slpk:selected").each(function(){ 
selectedValues.push($(this).val()); 
});

Copier après la connexion

Sélectionner l'élément spécifié (utilisé pour l'édition de l'écho ):

Sélection unique : $('.selectpicker').selectpicker('val', 'listid');

Sélection multiple : var arr=str. split(' ,'); $('.selectpicker').selectpicker('val', arr);

5. Vous trouverez ci-joint mon code source et les données déroulantes sont obtenues à partir de. l'arrière-plan via ajax :

$(function() { 
  $(".selectpicker").selectpicker({ 
   noneSelectedText : &#39;请选择&#39; 
  }); 
  $(window).on(&#39;load&#39;, function() { 
   $(&#39;.selectpicker&#39;).selectpicker(&#39;val&#39;, &#39;&#39;); 
   $(&#39;.selectpicker&#39;).selectpicker(&#39;refresh&#39;); 
  }); 
  //下拉数据加载 
  $.ajax({ 
   type : &#39;get&#39;, 
   url : basePath + "/lictran/tranStation/loadRoadForTranStationDetail", 
   dataType : &#39;json&#39;, 
   success : function(datas) {//返回list数据并循环获取 
    var select = $("#slpk"); 
    for (var i = 0; i < datas.length; i++) { 
     select.append("<option value=&#39;"+datas[i].ROAD_CODE+"&#39;>" 
       + datas[i].ROAD_NAME + "</option>"); 
    } 
    $(&#39;.selectpicker&#39;).selectpicker(&#39;val&#39;, &#39;&#39;); 
    $(&#39;.selectpicker&#39;).selectpicker(&#39;refresh&#39;); 
   } 
  }); 
 });

Copier après la connexion

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.