JS Composant Bootstrap select2 Méthode d'utilisation Méthode

Cet article résume l'utilisation du composant bootstrap select2 dans certains projets réels. Il est partagé avec vous. Les amis dans le besoin peuvent en tirer des leçons et éviter les détours. Le contenu spécifique est le suivant

Image de reproduction:

Qu'il s'agisse d'obtenir des données de manière fixe ou d'obtenir AJAX, bootstrap.js / css et select2.js / css et:

 {{Stylesheet_link ('css / bootstrap.css')}} {{Stylesheet_link ('css / select2 Stylesheet_link ('CSS / Prettify.css')}} {{javascript_include ('js / lib / jQuery.js')}} {{javascript_include ('js / lib / select2.full.js')}} {{javascript_include ('js / lib / bobotesSter }} <div> <section id = "tags"> <v> <p> <select multiple = "multiple"> <option selected = "select"> orange </ option> <opopoption> white </ option> <option selected = "selected"> violet </ div> </lect> </p> </ div> </ section> </div> </ div> </poly

Moyen fixe d'obtenir:

 $ (". js-example-tags"). select2 ({tags: true, // pouvez-vous personnaliser la balise createSearchCoice: function (term, data) {alert (1); if ($ (data) .filter (function () {return this.text.localecompare (term) === 0;}). multiple: true, data: [{id: 0, texte: 'story'}, {id: 1, texte: 'bug'}, {id: 2, texte: 'tâche'}]});

Obtenez la méthode Ajax:

 $ (". js-example-tags"). select2 ({// activer les balises de tagging: true, // charger des données distantes // voir https://select2 [];

illustrer

Le format de retour de données dans ajax devrait ressembler à ceci: [{id: 0, texte: 'story'}, {id: 1, texte: 'bug'}, {id: 2, texte: 'tâche'}]

Exemple de code PHP correspondant

 ... $ p1 = array (id => "1", text => "java"); $ p2 = array (id => "2", text => "jvm"); $ test = array (1 => $ p1,2 => $ p2); $ params ['ResponseData'] = $ test; $ this-> voir-> Disable (); retour parent :: ajaxResponse ($ params);

Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:

Tutoriel d'apprentissage bootstrap

Tutoriel pratique de bootstrap

Tutoriel d'utilisation du plug-in bootstrap

Ce qui précède est une introduction à certaines méthodes d'utilisation de Select2, j'espère que cela sera utile à l'apprentissage de chacun.