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

时间:2012-10-15 05:04:29

标签: jquery ajax jquery-select2

大家好我用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/我正在使用Mutiple Value Select Box,我可以用我的dropdwon绑定

   $("dropdownid").Select2()

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

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

它的工作,但我如何解决我的选择,因为用户可以选择任何东西所以我不能写一个,静态的,这就是为什么我需要动态地在编辑模式上绑定我的选定值。

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

14 个答案:

答案 0 :(得分:55)

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

答案 1 :(得分:14)

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

答案 2 :(得分:12)

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

设置多选择2中的值如下

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

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

此外,您有时会不想触发change事件,因为您可能还有一些其他代码会执行,如果您使用上述方法将会发生这种情况,以便您可以更改没有触发change事件的值

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

答案 3 :(得分:6)

使用select2 jquery库:

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

答案 4 :(得分:5)

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

答案 5 :(得分:3)

看看这个会有所帮助。

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

网址为 - link

答案 6 :(得分:3)

您可以在array中添加所选值,并将其设置为默认选择值

例如:

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

试试这个,这绝对有效!

答案 7 :(得分:3)

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

答案 8 :(得分:1)

使用以下多重选择功能。

$("#drp_Books_Ill_Illustrations").val(["val1", "val2"]).trigger("change");

答案 9 :(得分:0)

不需要做那么多事情。 使用多个select2设置值 var selectedvalue =“1,2,3”; //如果选择了前3个产品 $( '#ddlProduct')VAL(的SelectedValue);

答案 10 :(得分:0)

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

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

2。当您使用带有多选选项的select2时,您可以将值的数组传递给select2,并且将设置所有这些值

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

请记住,你可以通过传递一个像这样的数组

来设置multiselect上的单个值
{{1}}

答案 11 :(得分:0)

这不起作用。即使两个选项在列表中可用,也只预先选择了一个值 map()

答案 12 :(得分:0)

要全选

 $('select[name=eventsFilter]').find('option').attr('selected', true);
$('select[name=eventsFilter]').select2();

取消全部隐藏

$('select[name=eventsFilter]').find('option').attr('selected', false);
  $('select[name=eventsFilter]').select2("");

答案 13 :(得分:-1)

使用如下所示的多选功能。

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