web-dev-qa-db-fra.com

Comment définir la valeur sélectionnée dans Multi-Value Select dans Jquery-Select2.?

salut tout ce que je lie ma liste déroulante avec Jquery-Select2. Cela fonctionne bien, mais je dois maintenant lier mon selectBox Multi-Value en utilisant Jquery-Select2.

Mon 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>

À partir de ce lien http://ivaynberg.github.com/select2/ j'utilise une boîte de sélection de valeurs multiples, je peux lier mon dropdwon avec 

   $("dropdownid").Select2()

cela fonctionne bien, mais maintenant je dois obtenir cette valeur sélectionnée dans ma liste déroulante en mode édition. J'utilise donc cet exemple.

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

cela fonctionne mais comment puis-je corriger mon choix, car l'utilisateur peut choisir n'importe quoi? Donc, je ne peux pas écrire un, c statiquement c'est pourquoi j'ai besoin de lier ma valeur sélectionnée en mode édition de manière dynamique.

Je pense que maintenant vous êtes tous clairs avec mon exigence. S'il vous plaît laissez-moi savoir si vous avez besoin d'une autorisation supplémentaire. 

jqueryajaxjquery-select2
42
Kaps Hasija

Eh bien, en fait, votre seul besoin. Chaque personne pour obtenir toutes les valeurs, cela vous aidera 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>

Le scénario:

 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);
    });
});
53
jd_7

Je suppose donc que vous voulez 2 options sélectionnées par défaut, puis en obtenir la valeur? Si c'est le cas:

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>

Et pour avoir de la valeur:

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

Pour définir la valeur:

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

Vous pouvez également utiliser un tableau pour définir les valeurs:

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

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

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

14
Geert

Je comprends que cet article est vieux, mais il y a eu des changements dans le fonctionnement de select2 et la réponse à cette question est extrêmement simple.

Pour définir les valeurs dans un multi-select2 est la suivante

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

Il n'est plus nécessaire de spécifier .select2 dans jquery, simplement .val

De plus, il y aura des moments où vous ne voudrez pas déclencher l'événement change car vous pourriez avoir un autre code à exécuter, ce qui se produira si vous utilisez la méthode ci-dessus afin de contourner le problème, vous pouvez modifier la valeur sans déclencher l'événement change ainsi

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

Utilisation de la bibliothèque select2 jquery:

$('#selector').val(arrayOfValues).trigger('change')
5
Angie Alejo
var valoresArea=VALUES
// it has the multiple values to set separated by comma
var arrayArea = valoresArea.split(',');
$('#area').select2('val',arrayArea);
5
pankaj yadav

vous pouvez ajouter les valeurs sélectionnées dans une array et la définir comme valeur pour la sélection par défaut

par exemple:

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

Essayez ceci, cela devrait certainement fonctionner!

3
Ravi Kiran

Il suffit de regarder celui-ci, cela aidera.

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

l'URL est- link

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

pas besoin de faire tant de choses . pour définir la valeur en utilisant plusieurs select2 var selectedvalue = "1,2,3"; // si les 3 premiers produits sont sélectionnés . $ ('# ddlProduct'). val (selectedvalue);

0
azhar_SE_nextbridge

Avec la bibliothèque select2, il existe 2 façons de définir la valeur 1. quand une valeur unique est présente, vous pouvez la transmettre sous forme de chaîne

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

2. lorsque vous utilisez select2 avec l'option multiselect, vous pouvez transmettre un tableau des valeurs à select2 et toutes ces valeurs seront définies

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

rappelez-vous que vous pouvez définir une valeur unique sur multiselect en passant un tableau également comme ceci 

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

Ça ne marche pas. une seule valeur est déjà présélectionnée même si les deux options sont disponibles dans la liste, seule la première est affichée ('#searchproject').select2('val', ['New Co-location','Expansion']);

0
djack109