Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2019-11-23 11:07:28
original
10461 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 : '请选择'//默认显示内容 
  });
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.

Articles connexes :

Le problème selon lequel IE8 ne peut pas s'actualiser à chaque fois lors de l'utilisation de l'accès ajax

Ajax appelle l'interface restful à transmettre Json Méthode de formatage des données (avec code)

Communication Ajax et cgi sous serveur Boa (tutoriel graphique)

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal