javascript - images - select2 size

Jquery select2 json data con optgroup e imágenes

Question

Estoy usando select2 con spring mvc. Obtuve los datos de mi controlador que necesito mostrar aquí en términos de opciones. Pero quiero que se agrupen como optgroup y también quiero que se adjunten imágenes que se puedan insertar manualmente como se indica a continuación:

 <optgroup label="group">
<option value="imageName">value 1</option>
<option value="imageName">value 1</option>
</optgroup>

Donde imageName es el nombre de la imagen. Quiero: 1) Agrupar opciones en json. 2) Proporcione este atributo de imagen en json para que select2 pueda formar los datos.

Aquí está el código:

$("#my-select").select2({
data : [ {
id : 0,
text : ''enhancement''
}, {
id : 1,
text : ''bug''
}, {
id : 2,
text : ''duplicate''
}, {
id : 3,
text : ''invalid''
}, {
id : 4,
text : ''wontfix''
} ]
});

Estoy creando mi json manualmente de mis objetos. Así que puedo proporcionar cualquier dato aquí. Alguna sugerencia ?

Answer 1

Select2 asigna objetos de datos a las etiquetas <option> y <optgroup> usando la siguiente lógica

Un objeto de datos (lo que se devuelve en la lista) que parece

{
''id'': ''value-here'',
''text'': ''text-here''
}

Se asignará a una <option> que parece

<option value="value-here">text-here</option>

Un objeto de datos que parece

{
''text'': ''label-here'',
''children'': [data_object, data_object]
}

Se asignará a un <optgroup> que parece

<optgroup label="label-here">
<!-- HTML for the `children` -->
</optgroup>

Así que el objeto de datos que está buscando devolver es

{
''text'': ''group'',
''children'': [
{
''id'': ''imageName'',
''text'': ''value 1''
},
{
''id'': ''imageName'',
''text'': ''value 1''
}
]
}