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''
    }
  ]
}