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

Question

我正在将我的下拉列表与Jquery-Select2绑定。它工作得很好，但现在我需要使用Jquery-Select2绑定我的多值selectBox。

我的DropDown

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

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

$("dropdownid").Select2()

它工作得很好，但现在我需要将选定的值放入编辑模式的下拉列表中，所以我使用了这个示例：

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

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

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

Answer 1

实际上你只需要$.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>

脚本：

 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

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

要设置多select2中的值，请执行以下操作

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

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

此外，有时您可能不想触发change事件，因为您可能有一些其他代码要执行，这就是使用上面的方法时会发生的事情，这样您就可以在不触发change事件的情况下更改值，如下所示

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

如果这不起作用，您也可以这样做，以不触发更改事件

$('#Books_Illustrations').select2();
$('#Books_Illustrations').val('some_value');

Answer 3

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

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>

并获得价值：

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

要设置值，请执行以下操作：

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

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

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

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

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