Adición dinámica de opciones y grupos de opciones en Select2

1 minuto de lectura

avatar de usuario
un.ser.humano.real

Con el siguiente html:

<input type="hidden" id='cantseeme'>

No tengo problemas para crear un control Select2 dinámicamente y agregar mis opciones:

// simplified example
var select2_ary = [];

select2_ary.push({
    id : "one",
    text : "one"
});
select2_ary.push({
    id : "two",
    text : "two"
});

$("#cantseeme").select2({
    placeholder : "Pick a number",
    data : select2_ary
});

Sin embargo, parece que no puedo averiguar cómo agregar optgroups Por aquí. encontré este discusión en github, y este artículo en un blog, pero el primero no parece discutir dinámica optgroup adiciones y simplemente no puedo darle ningún sentido a esto último.

¿Alguien tiene alguna idea?

avatar de usuario
omma2289

Encontré la respuesta enterrada dentro de la discusión de github a la que se vinculó, la estructura del objeto para optgroups es como sigue:

{
  id      : 1,
  text    : 'optgroup',
  children: [{
                id  : 2,
                text: 'child1'
             },
             {
                id      : 3,
                text    : 'nested optgroup', 
                children: [...]
             }]
}

violín de demostración

  • palma de la cara Muchas gracias. Me siento tan tonta por perderme eso. Tbh, ¡sorprendido de que nadie más haya preguntado eso antes aquí!

    – un.ser.humano.real

    21 de agosto de 2013 a las 0:10


  • koala_dev, parece que el violín que publicaste ya no funciona

    – IcedDante

    03/08/2016 a las 19:27

avatar de usuario
bradford

Sí, la respuesta anterior de koala_dev es correcta. Sin embargo, si no desea que los encabezados de grupos de opciones sean etiquetas seleccionables, elimine el campo “id” de los encabezados que pasa a select2. Niños[ ] los artículos todavía necesitan un campo “id” para ser seleccionables. Por ejemplo:

// `Header One` Is Selectable
[{
    id       : 0,
    text     : "Header One",
    children : [{
        id   : 0,
        text : "Item One"
    }, { 
        ...
    }]
}] 


// `Header One` Is Not Selectable
[{
    text     : "Header One",
    children : [{
        id   : 0,
        text : "Item One"
    }, { 
        ...
    }]
}] 

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad