Este artículo resume el uso del componente Bootstrap Select2 en algunos proyectos reales. Se comparte contigo. Los amigos necesitados pueden aprender de él y evitar los desvíos. El contenido específico es el siguiente
Imagen de reproducción:
Ya sea para obtener datos de manera fija o obtener AJAX, bootstrap.js/css y select2.js/css y:
{{{stylesheet_link ('css/bootstrap.css')}} {{{stylesheet_link ('css/select2.min.css')}} {{ stylesheet_link ('css/prettify.css')}} {{javascript_include ('js/lib/jQuery.js')}} {{javaScript_include ('js/lib/select2.full.js')} {{{{{{{{{ javascript_include ('js/lib/bootstrap.js')}} <div> <section id = "etiquetas"> <div> <p> <select múltiple = "múltiples"> <opción seleccionada = "seleccionada"> naranja </ppection> <opción> white </opción> <opción seleccionada = "seleccionado"> púrpura </selection> </p> </div> <section>Camino fijo para obtener:
$ (". JS-EXample-Tags"). Select2 ({Tags: true, // ¿Puede personalizar la etiqueta CreateSearchChoice: function (Term, Data) {alert (1); if ($ (data) .filter (function () {return this.text.localecompare (término (término) == 0;}). múltiple: true, datos: [{id: 0, texto: 'story'}, {id: 1, texto: 'bug'}, {id: 2, text: 'tarea'}]});Obtener el método AJAX:
$ (". JS-EXample-Tags"). SELECT2 ({// Enable en etiqueta etiquetas: true, // Cargando datos remotos // consulte https://select2.github.io/options.html#ajax ajax: {url: "ask2/etiquetas", processResultos: function (data) {console.log (data); [];ilustrar
El formato de retorno de datos en AJAX debería verse así: [{id: 0, texto: 'story'}, {id: 1, text: 'bug'}, {id: 2, text: 'tarea'}]
Ejemplo de código PHP correspondiente
... $ p1 = array (id => "1", text => "java"); $ p2 = array (id => "2", text => "jvm"); $ test = array (1 => $ p1,2 => $ p2); $ params ['ResponseData'] = $ test; $ this-> ver-> discapacitar (); return parent :: ajaxResponse ($ params);
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior es una introducción a algunos métodos de uso de Select2, espero que sea útil para el aprendizaje de todos.