Jquery-Select2의 Multi-Value Select에서 선택한 값을 설정하는 방법

Jquery-Select2의 Multi-Value Select에서 선택한 값을 설정하는 방법

로 드롭 다운을 구속합니다.Jquery-Select2정상적으로 동작하고 있습니다만, Multi-Value를 바인드 할 필요가 있습니다.selectBox을 사용하여Jquery-Select2.

마이 드롭 다운

<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/에서 [Multiple Value Select Box]를 사용하고 있습니다.드롭다운을 바인딩 할 수 있습니다.

$("dropdownid").Select2()

정상적으로 동작하고 있습니다만, 여기서 선택한 값을 편집 모드로 드롭 다운으로 할 필요가 있기 때문에, 다음의 예를 사용하고 있습니다.

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

동작하고 있는데, 사용자가 어떤 것이든 선택할 수 있기 때문에, 어떻게 하면 제 선택을 고칠 수 있을까요?따라서 a,c를 정적으로 쓸 수 없기 때문에 편집 모드에서 Selected 값을 동적으로 바인드해야 합니다.

이제 제 요구 사항을 모두 이해하셨다고 생각합니다.추가 통관이 필요하시면 알려주시기 바랍니다.

음, 실제로 모든 가치를 얻기 위해 필요한 것은 각각 $.뿐입니다.이것에 의해, 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);
    });
});

이 투고는 오래된 것으로 알고 있습니다만, 현재 select2의 동작방법이 변경되어 이 질문에 대한 답변은 매우 간단합니다.

multi select2에서 값을 설정하는 방법은 다음과 같습니다.

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

지정할 필요가 없습니다..select2더 이상 jquery에, 단순하게.val

또한 당신은 발사하고 싶지 않을 때가 있을 것이다.changeevent: 실행 가능한 다른 코드가 있을 수 있습니다.이러한 방법은 위의 방법을 사용하여 실행하지 않고 값을 변경할 수 있는 경우 발생합니다.change그와 같은 사건

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

그래도 작동하지 않으면 변경 이벤트를 트리거하지 않도록 할 수도 있습니다.

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

그럼 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/

select2 jquery 라이브러리 사용:

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

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

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

이것 좀 봐, 도움이 될 거야.

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

URL은 링크입니다.

선택한 값을 추가할 수 있습니다.array기본 선택 값으로 설정합니다.

예:

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

이거 먹어봐, 이거 꼭 될 거야!

이거 안 되네.목록에서 두 옵션을 모두 사용할 수 있지만 첫 번째 값만 표시됩니다.('#searchproject').select2('val', ['New Co-location','Expansion']);

select2 라이브러리를 사용하여 값 1을 설정하는 방법은 두 가지가 있습니다. 단일 값이 있는 경우 문자열로 전달할 수 있습니다.

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

2. 멀티 셀렉트 옵션과 함께 select2를 사용하는 경우 값 배열을 select2로 전달하면 모든 값이 설정됩니다.

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

이와 같이 어레이를 전달함으로써 멀티 셀렉트에 단일 값을 설정할 수 있습니다.

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

아래와 같이 멀티셀렉트 기능을 사용합니다.

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

모두 선택

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

모두 선택 취소

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

그렇게 많은 걸 할 필요가 없어요.multiple select2 var selected value="1,2,3"을 사용하여 값을 설정합니다. //처음 3개의 제품을 선택한 경우.$('#dlProduct').val(선택값);

$('#area').select2().val(arrayArea).trigger('change'); 

예전엔 이걸 좋아해서 select2 version4를 쓰고 있어요.결과가 나왔습니다.

아래와 같이 멀티셀렉트 기능을 사용합니다.

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

언급URL : https://stackoverflow.com/questions/12889552/how-to-set-selected-value-in-multi-value-select-in-jquery-select2