javascript - dinamico - Seleccionando un valor en select2 teniendo optGroup

select2 label

Question

Estoy dando la siguiente entrada de datos para seleccionar2

data = [{
    "id": "all",
    "text": "All",
    "children": [{
        "id": "item1",
        "text": "item1"
    }, {
        "id": "item2",
        "text": "item2"
    }]
}];

y estoy inicializando select2 como:

$(parent).select2({"data":data});

Ahora para seleccionar el valor " item1 ", hice

$(parent).select2("val",["item1"]);

Sin embargo, en lugar de valor " item1 " value " all " se está seleccionando. ¿Cómo seleccionar valor item1?

Answer 1

Intenté hacer esta demostración para mostrarles que funciona. La demostración, utiliza la etiqueta de select como un selector para un elemento de select vacío y existente. De hecho, no sé a qué te refieres por parent :

<select>
</select>
<script>
data = [{
    "id": "all",
    "text": "All",
    "children": [{
        "id": "item1",
        "text": "item1"
    }, {
        "id": "item2",
        "text": "item2"
    }]
}];

$(''select'').select2({
    "data": data
});

$(''select'').select2("val", ["item2"]);

</script>

Answer 2

No estoy seguro de si quiere decir que el valor "Todo" se selecciona al inicio o si desea seleccionar "elemento1" por código y no funciona. Me parece extraño que "Todos" se seleccione como valor, ya que debe tratarse como una categoría, incluso agregando

$(".select2-text").select2("val",["item1"]);

no seleccionará "Todo" para mí. Si agrego

$(".select2-text").select2("val",["item2"]);

Seleccionará "item2" para mí (lo que significa que el método para seleccionar el elemento funciona, aunque no es la mejor manera, como se indica en la Respuesta de Lelio Faieta)

si agrego

$(".select2-text").select2("val",["all"]);

no seleccionará "Todo" para mí, solo me mostrará una selección en blanco. Así que creo que debe haber un problema con tu código porque en una página limpia parece que no hay manera de seleccionar "Todos"

¿Puede mostrarnos el código completo, incluido el html de su página (al menos la parte relevante para la selección)? He intentado esto (vea plunker aquí: http://plnkr.co/edit/m6pFUt?p=preview )

<script>
$(document).ready(function() {
    data = [{
        "id": "all",
        "text": "All",
        "children": [{
            "id": "item1",
            "text": "item1"
        }, {
            "id": "item2",
            "text": "item2"
        }]
    }];

    $(".select2-text").select2({
        "data": data
    });
});
</script>
<select class="select2-text"></select>

Y comienza con el elemento 1 seleccionado, mientras que "Todos" se trata como una categoría. Entonces tal vez es solo porque algo está mal en tu código / HTML.
¿Qué versión de Select2 estás usando? Estoy usando 2-4.0.0

Answer 3

Para establecer el valor seleccionado usando select2 debe usar:

$(parent).val("item1").trigger("change");

De las notas de publicación :

En su lugar, debería llamar directamente a .val en el elemento subyacente. Si necesitaba el segundo parámetro (triggerChange), también debería llamar a .trigger ("change") en el elemento.

$("select").val("1"); // instead of $("select").select2("val", "1");

Answer 4

JSFiddle donde se selecciona item1.

JS:

var data = [{
    id: ''all'',
    text: ''All'',
    children: [{
        id: ''item1'',
        text: ''item1''
    }, {
        id: ''item2'',
        text: ''item2''
    }]
}];

$(''.js-example-data-array'').select2({data:data});

$(''.js-example-data-array'').select2(''val'',[''item1'']);

HTML:

<select class="js-example-data-array">
</select>