web-dev-qa-db-ja.com

Jquery-Select2の複数値選択で選択した値を設定する方法

こんにちは、私はドロップダウンをJquery-Select2にバインドしています。正常に動作しますが、今度はJquery-Select2を使用してMulti-Value 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を使用しています。

   $("dropdownid").Select2()

それはうまく機能していますが、今では編集モードでドロップダウンにその選択した値を取得する必要があるので、この例を使用しています

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

ユーザーは何でも選択できるため、どのように選択を修正できますか？a、cを静的に書くことができないので、編集モードで選択した値を動的にバインドする必要があります。

私は今、あなたのすべてが私の要件に明確であると思います。さらにクリアランスが必要な場合はお知らせください。

jqueryajaxjquery-select2
49
Kaps Hasija

実際には、すべての値を取得するために必要なのは$ .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);
    });
});
58
jd_7

だから私はあなたが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/

15
Geert

この投稿は古いものですが、select2の動作方法が変更されており、この質問に対する答えは非常に簡単です。

Multi select2に値を設定するには、次のようにします

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

Jqueryで.select2を指定する必要はもうありません。単に.val

また、changeイベントを発生させたくない場合もあります。これは、上記のメソッドを使用した場合に実行される他のコードが実行される可能性があるためです。 changeイベントを発生させる

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

Select2 jqueryライブラリの使用：

$('#selector').val(arrayOfValues).trigger('change')
6
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

選択した値をarrayに追加し、デフォルト選択の値として設定できます

例えば：

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

これを試してください、これは間違いなく動作するはずです！

3
Ravi Kiran

これが役立つのを見てください。

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

uRLは リンク

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

多くのことをする必要はありません。複数のselect2 var selectedvalue = "1,2,3"を使用して値を設定する場合。 //最初の3つの製品が選択された場合。 $（ '＃ddlProduct'）。val（selectedvalue）;

0
azhar_SE_nextbridge

Select2ライブラリを使用して、値1を設定するには2つの方法があります。単一の値が存在する場合は、文字列として渡すことができます

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

2.複数選択オプションでselect2を使用している場合、値の配列をselect2に渡すことができ、それらすべての値が設定されます

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

このような配列を渡すことで、複数選択で単一の値を設定できることを忘れないでください

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

これは機能しません。両方のオプションがリストで使用可能である場合でも、1つの値のみが事前に選択されます('#searchproject').select2('val', ['New Co-location','Expansion']);

0
djack109