Artikel ini merangkum penggunaan bootstrap komponen Select2 dalam beberapa proyek aktual. Itu dibagikan dengan Anda. Teman yang membutuhkan dapat belajar darinya dan menghindari jalan memutar. Konten spesifiknya adalah sebagai berikut
Gambar reproduksi:
Apakah itu untuk mendapatkan data dengan cara yang tetap atau untuk mendapatkan jax, bootstrap.js/css dan select2.js/css dan:
{{stylesheet_link ('css/bootstrap.css')}} {{stylesheet_link ('css/select2.min.css')}} {{stylesheet_link ('css/font-aweage.min.css') {css/font/font. stylesheet_link ('css/prettify.css')}} {{javascript_include ('js/lib/jQuery.js')}} {{javascript_include ('js/lib/select2.full.js')} {{'js/lib/lib/select2.full.js')} {'{{' js/lib/lib/sfull.js ') {') {' javascript_include('js/lib/bootstrap.js') }}<div> <section id="tags"> <div> <p> <select multiple="multiple"> <option selected="selected">orange</option> <option>white</option> <option selected="selected">purple</option> </select> </p> </div></section></div></div>Memperbaiki cara untuk mendapatkan:
$ (". JS-example-tags"). Select2 ({Tags: true, // dapatkah Anda menyesuaikan tag CreateSearchChoice: function (istilah, data) {waspada (1); if ($ (data) .filter (function () {return this.text.localecompare (istilah) === 0;}) {panjang === 0) {iD: ID: ID: ID: ID: ID: ID: ID: ID: ID: ID: ID: ID: ID: ID: ID: ID: ID: ID: ID: ID: ID: {{{{{{{{{{{{istilah). Multiple: True, Data: [{ID: 0, Teks: 'Story'}, {ID: 1, Teks: 'Bug'}, {id: 2, Teks: 'Tugas'}]});Dapatkan metode Ajax:
$(".js-example-tags").select2({ // enable tagging tags: true, // loading remote data // see https://select2.github.io/options.html#ajax ajax: { url: "Ask2/tags", processResults: function (data, page) { console.log(data); var parsed = data; var arr =];menjelaskan
Format pengembalian data di Ajax akan terlihat seperti ini: [{id: 0, teks: 'Story'}, {id: 1, teks: 'bug'}, {id: 2, teks: 'tugas'}]]
Contoh Kode PHP yang sesuai
... $ p1 = array (id => "1", text => "java"); $ p2 = array (id => "2", text => "jvm"); $ test = array (1 => $ p1,2 => $ p2); $ params ['responsedata'] = $ test; $ this-> view-> disable (); Return Parent :: AjaxResponse ($ params);
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah pengantar beberapa metode penggunaan Select2, saya harap ini akan membantu untuk pembelajaran semua orang.