jquery - bootstrap - select2 load data ajax

¿Cómo establecer el valor seleccionado en Multi-Value Select en Jquery-Select2.?

Question

Hola a todos, estoy vinculando mi menú desplegable con Jquery-Select2. Está funcionando bien, pero ahora necesito vincular mi selectBox de valores múltiples usando Jquery-Select2.

My DropDwon

    <div class="divright">
                        <select id="drp_Books_Ill_Illustrations" 
                            class="leaderMultiSelctdropdown Books_Illustrations" name="drp_Books_Ill_Illustrations"
                            multiple="">
                            <option value=" ">No illustrations</option>
                            <option value="a">Illustrations</option>
                            <option value="b">Maps</option>
                            <option value="c">Portraits</option>


                        </select>
                    </div>

Desde este enlace http://ivaynberg.github.com/select2/ estoy usando el cuadro de selección de valor múltiple, puedo vincular mi dropdwon con

   $("dropdownid").Select2()

funciona bien, pero ahora necesito obtener ese valor seleccionado en mi menú desplegable en modo de edición, así que estoy usando este ejemplo

 $(".Books_Illustrations").select2("val", ["a", "c"]);

está funcionando, pero ¿cómo puedo solucionar mi elección, porque el usuario puede elegir cualquier cosa? Por lo tanto, no puedo escribir estáticamente, por eso necesito vincular mi valor Seleccionado en el modo Editar dinámicamente.

Creo que ahora todos ustedes están claros con mi requerimiento. Avíseme si necesita más autorización.

Answer 1

Bueno, en realidad solo necesitas $ .each para obtener todos los valores, te ayudará jsfiddle.net/NdQbw/5

<div class="divright">
            <select id="drp_Books_Ill_Illustrations" class="leaderMultiSelctdropdown Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple="">
                <option value=" ">No illustrations</option>
                <option value="a" selected>Illustrations</option>
                <option value="b">Maps</option>
                <option value="c" selected>selectedPortraits</option>
            </select>
    </div>

<div class="divright">
        <select id="drp_Books_Ill_Illustrations1" class=" Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple="">
            <option value=" ">No illustrations</option>
            <option value="a">Illustrations</option>
            <option value="b">Maps</option>
            <option value="c">selectedPortraits</option>
        </select>
</div>

<button class="getValue">Get Value</button>
<button  class="setValue"> Set  value </button>

<div class="divright">
        <select id="drp_Books_Ill_Illustrations2" class="leaderMultiSelctdropdown Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple="">
            <option value=" ">No illustrations</option>
            <option value="a" selected>Illustrations</option>
            <option value="b">Maps</option>
            <option value="c" selected>selectedPortraits</option>
        </select>
</div>

<div class="divright">
        <select id="drp_Books_Ill_Illustrations3" class=" Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple="">
            <option value=" ">No illustrations</option>
            <option value="a">Illustrations</option>
            <option value="b">Maps</option>
            <option value="c">selectedPortraits</option>
        </select>
</div>

<button class="getValue1">Get Value</button>
<button  class="setValue1"> Set  value </button>

La secuencia de comandos:

 var selectedValues = new Array();
    selectedValues[0] = "a";
    selectedValues[1] = "c";

$(".getValue").click(function() {
    alert($(".leaderMultiSelctdropdown").val());
});
$(".setValue").click(function() {
   $(".Books_Illustrations").val(selectedValues);
});

$(''#drp_Books_Ill_Illustrations2, #drp_Books_Ill_Illustrations3'').select2();


$(".getValue1").click(function() {
    alert($(".leaderMultiSelctdropdown").val());
});

$(".setValue1").click(function() {
    //You need a id for set values
    $.each($(".Books_Illustrations"), function(){
            $(this).select2(''val'', selectedValues);
    });
});

Answer 2

Entonces, supongo que desea que se seleccionen 2 opciones por defecto, y luego obtener el valor. Si es así:

http://jsfiddle.net/NdQbw/1/

<div class="divright">
    <select id="drp_Books_Ill_Illustrations" class="leaderMultiSelctdropdown Books_Illustrations" name="drp_Books_Ill_Illustrations" multiple="">
        <option value=" ">No illustrations</option>
        <option value="a" selected>Illustrations</option>
        <option value="b">Maps</option>
        <option value="c" selected>selectedPortraits</option>
    </select>
</div>

Y para obtener valor:

alert($(".leaderMultiSelctdropdown").val());

Para establecer el valor:

 $(".leaderMultiSelctdropdown").val(["a", "c"]);

También puede usar una matriz para establecer los valores:

var selectedValues = new Array();
selectedValues[0] = "a";
selectedValues[1] = "c";

$(".Books_Illustrations").val(selectedValues);

http://jsfiddle.net/NdQbw/4/

Answer 3

Esto no funciona solo se preselecciona un valor, aunque ambas opciones están disponibles en la lista, solo se muestra el primero (''#searchproject'').select2(''val'', [''New Co-location'',''Expansion'']);

Answer 4

Me parece que esta publicación es antigua, pero ha habido cambios en cómo funciona select2 ahora y la respuesta a esta pregunta es extremadamente simple ahora.

Para establecer los valores en un multi select2 es como sigue

$(''#Books_Illustrations'').val([1,2,3]).change();

Ya no es necesario especificar .select2 en jquery, simplemente .val

También habrá momentos en que no querrá activar el evento de change porque es posible que tenga otro código que se ejecutará, que es lo que sucederá si usa el método anterior para evitar que pueda cambiar el valor sin disparar el evento de change al igual que

$(''#Books_Illustrations'').select2([1,2,3], null, false);

Answer 5

No hay necesidad de hacer tantas cosas. para el valor establecido usando multiple select2 var selectedvalue = "1,2,3"; // si se seleccionan los primeros 3 productos. $ (''# ddlProduct''). val (selectedvalue);

Answer 6

Solo mira este, te ayudará.

var valoresArea=VALUES // it has the multiple values to set, separated by comma
var arrayArea = valoresArea.split('','');
$(''#area'').val(arrayArea);

la URL es- link

Answer 7

Usando la biblioteca select2 jquery:

$(''#selector'').val(arrayOfValues).trigger(''change'')

Answer 8

Usando la biblioteca select2, hay 2 formas de establecer el valor 1. cuando hay un solo valor, puede pasarlo como una cadena

$("#elementid").select2("val","valueTobeset")

2. cuando está utilizando select2 con la opción de selección múltiple, puede pasar una matriz de valores a select2 y se establecerán todos esos valores

var arrayOfValues = ["a","c"]
$("#elementid").select2("val",arrayOfValues)

recuerde que puede establecer un valor único en multiselección pasando una matriz también como esta

var arrayOfValues = ["a"]
$("#elementid").select2("val",arrayOfValues)

Answer 9

Utilice la función de selección múltiple como se muestra a continuación.

$(''#drp_Books_Ill_Illustrations'').multiSelect(''select'', ''value'');

Answer 10

puede agregar los valores seleccionados en una array y establecerlo como el valor para la selección predeterminada

p.ej:

var selectedItems =[];
selectedItems.push("your selected items");
..
$(''#drp_Books_Ill_Illustrations'').select2(''val'',selectedItems );

¡Prueba esto, esto definitivamente debería funcionar!

Answer 11

var valoresArea=VALUES
// it has the multiple values to set separated by comma
var arrayArea = valoresArea.split('','');
$(''#area'').select2(''val'',arrayArea);

Answer 12

This is with reference to the original question
$(''select'').val([''a'',''c'']);
$(''select'').trigger(''change'');