如何在 Jquery-Select2 中的多值选择中设置选定的值？

How to Set Selected value in Multi-Value Select in Jquery-Select2.?

提问by Kaps Hasija

hi all i am binding my dropdown with Jquery-Select2. Its working fine but now i need to Bind my Multi-Value selectBox by using Jquery-Select2.

大家好，我正在用 Jquery-Select2 绑定我的下拉列表。它工作正常，但现在我需要使用 Jquery-Select2 绑定我的多值选择框。

My DropDwon

我的 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>

From this link http://ivaynberg.github.com/select2/i am using Mutiple Value Select Box , I can Bind my dropdwon with

从这个链接 http://ivaynberg.github.com/select2/我正在使用多值选择框，我可以绑定我的 dropdwon

   $("dropdownid").Select2()

its working fine, but now i need to get that selected value into my dropdown on edit mode So i am using this Example

它工作正常，但现在我需要在编辑模式下将该选定的值放入我的下拉列表中所以我正在使用此示例

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

its working but how can i fix my choice, because user can choice anything So i can't write a,c statically thats why i need to bind my Selected value on Edit mode dynamically.

它的工作，但我如何修复我的选择，因为用户可以选择任何东西所以我不能静态地写 a,c 这就是为什么我需要在编辑模式下动态绑定我的 Selected 值。

I think now you all are clear with my requirement. Please let me know if you need further clearance.

我想现在你们都清楚我的要求了。如果您需要进一步的许可，请告诉我。

回答by jd_7

Well actually your only need $.each to get all values, it will help you jsfiddle.net/NdQbw/5

那么实际上你只需要 $.each 来获取所有值，它会帮助你 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>

The script:

剧本：

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

回答by Cesar Bielich

I get this post is old but there have been changes to how select2 works now and the answer to this question is extremely simple now.

我知道这篇文章很旧，但现在 select2 的工作方式发生了变化，现在这个问题的答案非常简单。

To set the values in a multi select2 is as follows

在多选2中设置值如下

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

There is no need to specify .select2in jquery anymore, simply .val

不再需要.select2在 jquery 中指定，只需.val

Also there will be times you will not want to fire the changeevent because you might have some other code that will execute which is what will happen if you use the method above so to get around that you can change the value without firing the changeevent like so

此外，有时您不想触发change事件，因为您可能还有一些其他代码将执行，如果您使用上面的方法，将会发生什么情况，以便绕过您可以更改值而change不像这样触发事件

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

回答by Geert

So I take it you want 2 options default selected, and then get the value of it? If so:

所以我认为你想要2个选项默认选中，然后得到它的值吗？如果是这样的话：

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

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>

And to get value:

并获得价值：

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

To set the value:

要设置值：

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

You can also use an array to set the values:

您还可以使用数组来设置值：

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

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

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

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

回答by Angie Alejo

Using select2 jquery library:

使用 select2 jquery 库：

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

回答by pankaj yadav

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

回答by Neelu

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

回答by Ravi Kiran

you can add the selected values in an arrayand set it as the value for default selection

您可以在 an 中添加选定的值array并将其设置为默认选择的值

eg:

例如：

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

Try this, this should definitely work!

试试这个，这绝对有效！

回答by Ravichandran Jothi

Just look at this one it will helps.

只要看看这个，它会有所帮助。

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

the URL is- link

URL是-链接

回答by Omkar Bandkar

Using select2 library there are 2 ways to set the value 1. when single value is present you can pass it as string

使用 select2 库有两种方法可以设置值 1。当存在单个值时，您可以将其作为字符串传递

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

2. when you are using select2 with multiselect option you can pass an array of the values to select2 and all those values will be set

2. 当您使用带有多选选项的 select2 时，您可以将一组值传递给 select2，所有这些值都将被设置

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

remember that you can set single value on multiselect by passing an array also like this

请记住，您也可以通过传递一个数组来在多选上设置单个值，就像这样

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

回答by dHyman109

This doesn't work. only one value is ever pre-selected even though both options are available in the list only the first is shown ('#searchproject').select2('val', ['New Co-location','Expansion']);

这不起作用。即使列表中的两个选项都可用，也只会预选一个值，但只显示第一个 ('#searchproject').select2('val', ['New Co-location','Expansion']);