El paso a paso o código que encontrarás en este post es la resolución más rápida y válida que encontramos a esta inquietud o problema.
Solución:
Para formatear las etiquetas, puede utilizar la función formatSelectionCssClass.
$("#mySelect").select2(
formatSelectionCssClass: function (data, container) return "myCssClass"; ,
);
O puede agregar una clase css basada en la identificación de la opción:
$("#mySelect").select2(
formatSelectionCssClass: function (data, container) return data.id; ,
);
Recuerde que deberá anular tanto filter como background_color en su clase css
Primero, una advertencia de que esto significa que está anulando el CSS que es interno a select2, por lo que si el código de select2 cambia en una fecha posterior, también tendrás que cambiar tu código. No hay formatChoiceCSS método en este momento (aunque sería útil).
Para cambiar el color predeterminado, deberá anular las diversas propiedades CSS de la etiqueta que tiene esta clase CSS:
.select2-search-choice
background-color: #56a600;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
-moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
color: #333;
border: 1px solid #aaaaaa;
Para cambiar la clase de cada etiqueta según el texto o la opción # de esa etiqueta, deberá agregar un evento de cambio:
$("#select2_element").on("change", function(e)
if (e.added)
// You can add other filters here like
// if e.val == option_x_of_interest or
// if e.added.text == some_text_of_interest
// Then add a custom CSS class my-custom-css to the added
$('.select2-search-choice:not(.my-custom-css)', this).addClass('my-custom-css');
);
Y puede definir un color de fondo personalizado, etc.en esta clase:
li.my-custom-css
background-color: // etc etc
En mi caso, necesitaba mostrar la diferencia entre las etiquetas que estaban “seleccionadas” y las que se estaban agregando.
La ayuda aquí fue para las versiones anteriores de select2, y no fue de mucha utilidad. Usando la versión 4.0 actual (con su documentación terriblemente escasa) pude lograr esto usando las funciones de la plantilla y un poco de ‘inteligencia’.
El primer paso es hacer una plantilla de los resultados (debe tenerse en cuenta que en cada acción de selección o eliminación, esto se activa para cada selección en el cuadro). Esto normalmente devuelve SOLO el texto que irá en el LI resultante … sin embargo, queremos envolver ese texto en un intervalo (y decirle a S2 que no elimine el HTML devolviendo un objeto) con una clase CSS personalizada para nuestro tipo. En mi ejemplo utilizo el selected propiedad para determinar esto:
$('.select2_sortable').select2(
tags: true,
templateSelection: function(selection)
if(selection.selected)
return $.parseHTML('' + selection.text + '');
else
return $.parseHTML('' + selection.text + '');
);
El HTML resultante después de seleccionar un elemento debería ser algo como esto:
-
×
John Doe
-
×
fdfsdfds
-
Pero esto no es suficiente, ya que necesitamos acceder al LI padre, no al hijo span. Y dado que CSS no permite selectores de padres, tenemos que ejecutar jQuery para que esto suceda. Debido a que estos se vuelven a dibujar, querremos ejecutar esta función tanto en el select y remove eventos del elemento Select2:
$('.select2_sortable').on("select2:select", function (ev)
updateSelectedParents();
);
$('.select2_sortable').on("select2:removed", function (ev)
updateSelectedParents();
);
function updateSelectedParents()
$('.im_selected').closest('li').addClass('im_connected_item');
$('.im_writein').closest('li').addClass('im_writein_item');
Finalmente resultando en:
-
×
John Doe
-
×
fdfsdfds
-
Y le permite diseñar sus elementos en función de la im_writein_item y im_connected_item Clases CSS.
Agradecemos que quieras favorecer nuestro estudio exponiendo un comentario o valorándolo te damos la bienvenida.