Choosen 플러그인을 사용하여 선택 항목

Choosen 플러그인을 사용하여 선택 항목

Chosen 플러그인으로 Select에서 현재 선택된 옵션을 변경하려고 합니다.

이 설명서에서는 목록을 업데이트하고 옵션을 선택하면 이벤트가 발생하지만 현재 선택한 값을 외부적으로 변경하는 것에 대해서는 아무것도 볼 수 없습니다.

jsFiddle을 만들어 코드와 선택 항목을 변경하는 방법을 시연했습니다.

$('button').click(function() {
    $('select').val(2);
    $('select').chosen().val(2);
    $('select').chosen().select(2);
});

문서의 "Update Choosen Dynamic" 섹션에서 다음을 수행합니다.필드에서 '선택:업데이트' 이벤트를 트리거해야 합니다.

$(document).ready(function() {

    $('select').chosen();

    $('button').click(function() {
        $('select').val(2);
        $('select').trigger("chosen:updated");
    });

});

참고: 1.0 이전 버전에서는 다음을 사용했습니다.

$('select').trigger("liszt:updated");

답변이 늦었지만, 위의 모든 답변에서 누락된 정보를 추가하고 싶습니다.

1) 선택한 값에서 단일 값을 선택하려면 다음을 선택합니다.

$('#select-id').val("22").trigger('chosen:updated');

2) 다중 선택 항목을 사용하는 경우 한 번에 여러 값을 설정해야 할 수도 있습니다.

$('#documents').val(["22", "25", "27"]).trigger('chosen:updated');

다음 링크에서 수집된 정보:
1) 선택한 문서
2) 선택한 Github 토론

선택한 옵션을 조작하기 위해 현재 옵션을 제거해야 하는 경우도 있습니다.

옵션을 설정하는 예는 다음과 같습니다.

<select id="mySelectId" class="chosen-select" multiple="multiple">
  <option value=""></option>
  <option value="Argentina">Argentina</option>
  <option value="Germany">Germany</option>
  <option value="Greece">Greece</option>
  <option value="Japan">Japan</option>
  <option value="Thailand">Thailand</option>
</select>

<script>
activateChosen($('body'));
selectChosenOptions($('#mySelectId'), ['Argentina', 'Germany']);

function activateChosen($container, param) {
    param = param || {};
    $container.find('.chosen-select:visible').chosen(param);
    $container.find('.chosen-select').trigger("chosen:updated");
}

function selectChosenOptions($select, values) {
    $select.val(null);                                  //delete current options
    $select.val(values);                                //add new options
    $select.trigger('chosen:updated');
}
</script>

JSFiddle(옵션 추가 방법 포함): https://jsfiddle.net/59x3m6op/1/

여러 유형의 선택 항목 및/또는 이미 선택한 항목을 하나씩 제거하려는 경우 드롭다운 목록 항목 내에서 직접 다음을 사용할 수 있습니다.

jQuery("body").on("click", ".result-selected", function() {
    var locID = jQuery(this).attr('class').split('__').pop();
    // I have a class name: class="result-selected locvalue__209"
    var arrayCurrent = jQuery('#searchlocation').val();
    var index = arrayCurrent.indexOf(locID);
    if (index > -1) {
        arrayCurrent.splice(index, 1);
    }
    jQuery('#searchlocation').val(arrayCurrent).trigger('chosen:updated');
});

언급URL : https://stackoverflow.com/questions/8980131/changing-selection-in-a-select-with-the-chosen-plugin