Los dos complementos de jQuery, Chosen y Select2, se utilizan para diseñar los cuadros de selección. Mejora el aspecto de los cuadros de selección, mejora su comportamiento, haciéndolos mucho más fáciles de usar. Se pueden utilizar tanto para cuadros de selección únicos como para cuadros de selección múltiple.
Estas bibliotecas jQuery deben agregarse:
- seleccionar2.min.js
- seleccionar2.min.css
- elegido.jquery.min.js
- elegido.min.css
Active el complemento en los cuadros de selección:
-
$(“.chosen-select”).chosen()
-
$(“.chosen-select”).select2()
Diferencias entre Select2 y Chosen:
-
Selección y Deselección
Select2 puede anular la selección de las opciones que se seleccionaron previamente simplemente haciendo clic en la opción seleccionada de la lista desplegable. Pero elegido no tiene esta función ya que las opciones seleccionadas se desvanecen.
<!DOCTYPE html><html><head><scriptsrc=</script><!--These jQuery libraries forchosen need to be included--><scriptsrc=</script><linkrel="stylesheet"href=<!--These jQuery libraries for select2need to be included--><scriptsrc=</script><linkrel="stylesheet"href=<script>$(document).ready(function() {//Select2$(".country").select2({maximumSelectionLength: 2,});//Chosen$(".country1").chosen({max_selected_options: 2,});});</script></head><body><form><h4>Selections using Select2</h4><selectclass="country"multiple="true"style="width: 200px;"><optionvalue="1">India</option><optionvalue="2">Japan</option><optionvalue="3">France</option></select><h4>Selections using Chosen</h4><selectclass="country1"multiple="true"style="width: 200px;"><optionvalue="1">India</option><optionvalue="2">Japan</option><optionvalue="3">France</option></select></form></body></html>Producción:
-
Acceso programático
Si algunas de las opciones tienen algún vínculo entre sí y estas opciones vinculadas tienen una alta probabilidad de ser seleccionadas, entonces se puede hacer con un solo clic usando Select2. Es muy útil en selecciones múltiples. Mientras que Chosen no puede realizar esta vinculación lógica.
<!DOCTYPE html><html><head><scriptsrc=</script><!--These jQuery libraries for chosenneed to be included--><scriptsrc=</script><linkrel="stylesheet"href=<!--These jQuery libraries forselect2 need to be included--><scriptsrc=</script><linkrel="stylesheet"href=<script>$(document).ready(function() {//Select2var $prog = $(".progLang").select2();$(".Front-end").on("click", function() {$prog.val(["ht", "js"]).trigger("change");});//Chosenvar $prog1 = $(".progLang1").chosen();$(".Front-end1").on("click", function() {$prog1.val(["ht", "js"]).trigger("change");});});</script></head><body><form><h4>Selections using Select2</h4><selectclass="progLang"multiple="true"style="width: 200px;"><optionvalue="py">Python</option><optionvalue="ja">Java</option><optionvalue="ht">HTML</option><optionvalue="js">Javascript</option><optionvalue="c">C++</option></select><inputtype="button"class="Front-end"value="set Front-end Technologies"/><h4>Selections using Chosen</h4><selectclass="progLang1"multiple="true"style="width: 200px;"><optionvalue="py">Python</option><optionvalue="ja">Java</option><optionvalue="ht">HTML</option><optionvalue="js">Javascript</option><optionvalue="c">C++</option></select><inputtype="button"class="Front-end1"value="set Front-end Technologies"/></form></body></html>Producción:
Después de hacer clic en el botón Establecer tecnologías front-end :
-
Etiquetado
Cuando tiene una amplia gama de opciones y no puede incluir todas las opciones, habilite la opción de etiquetas. Esto hará que el usuario agregue una nueva opción si aún no está presente en las opciones. Esto se puede hacer configurando la opción de etiquetas en «verdadero» .
Esta opción está disponible en Select2 mientras que en Elegido el usuario no puede agregar nuevas opciones a la lista.
<!DOCTYPE html><html><head><scriptsrc=</script><!--These jQuery libraries forchosen need to be included--><scriptsrc=</script><linkrel="stylesheet"href=<!--These jQuery libraries for select2need to be included--><scriptsrc=</script><linkrel="stylesheet"href=<script>$(document).ready(function() {//Select2$(".progLang").select2({tags: true,});//Chosen$(".progLang1").chosen({tags: true,});});</script></head><body><form><h4>Selections using Select2</h4><selectclass="progLang"multiple="true"style="width: 200px; position: relative;"><optionvalue="py">Python</option><optionvalue="ja">Java</option><optionvalue="ht">HTML</option></select><h4>Selections using Chosen</h4><selectclass="progLang1"multiple="true"style="width: 200px;"><optionvalue="py">Python</option><optionvalue="ja">Java</option><optionvalue="ht">HTML</option></select></form></body></html>Producción:
-
Tokenización
La tokenización se usa después de que la opción de etiquetas se establece en «verdadero». Proporciona separadores de fichas que se utilizan como acceso directo para crear etiquetas. Esto se puede hacer escribiendo cualquier token separador que se especifica en la lista, después del nombre de la etiqueta. Se puede crear cualquier carácter como separador de fichas con la ayuda de Select2.
Como se mencionó anteriormente, dado que Chosen no tiene la función de etiquetado, la función de tokenización tampoco está disponible.
<!DOCTYPE html><html><head><scriptsrc=</script><!--These jQuery libraries forchosen need to be included--><scriptsrc=</script><linkrel="stylesheet"href=<!--These jQuery libraries forselect2 need to be included--><scriptsrc=</script><linkrel="stylesheet"href=<script>$(document).ready(function() {//Select2$(".progLang").select2({tags: true,maximumSelectionLength: 2,tokenSeparators: ["/", ", ", ";", " ", "#"],});//Chosen$(".progLang1").chosen({tags: true,max_selected_options: 2,tokenSeparators: ["/", ", ", ";", " ", "#"],});});</script></head><body><form><h4>Selections using Select2</h4><selectclass="progLang"multiple="true"style="width: 200px;"><optionvalue="py">Python</option><optionvalue="ja">Java</option><optionvalue="ht">HTML</option></select><h4>Selections using Chosen</h4><selectclass="progLang1"multiple="true"style="width: 200px;"><optionvalue="py">Python</option><optionvalue="ja">Java</option><optionvalue="ht">HTML</option></select></form></body></html>Producción:
Publicación traducida automáticamente
Artículo escrito por manvi_jain14 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA