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

Question

大家好我用Jquery-Select2绑定我的下拉列表.它工作正常,但现在我需要使用Jquery-Select2绑定我的多值selectBox.

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

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

   $("dropdownid").Select2()

它工作正常,但现在我需要将所选值添加到我的编辑模式下拉菜单中所以我使用此示例

 $(".Books_Illustrations").select2("val", ["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

所以我认为你想要默认选择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/

Answer 3

我觉得这篇文章已经过时了,但是现在对select2的工作方式有所改变,现在这个问题的答案非常简单.

要在多选择2中设置值,请执行以下操作

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

.select2简单地说,不再需要在jquery中指定.val

还有一些时候你不会想要激活这个change事件,因为你可能有一些其他的代码会执行,如果你使用上面的方法会发生什么,所以你可以改变这个值,而不是change像这样触发事件

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

Answer 4

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

Answer 5

使用select2 jquery库:

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

Answer 6

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