Chosen 플러그인으로 선택에서 선택 변경


105

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

문서 덮개 목록을 업데이트하고, 외부 현재 선택된 값을 변경상의 옵션을 선택한 경우, 아무것도하지만, (나는 볼 수) 트리거링.

코드 와 선택 항목을 변경하는 방법 을 보여주기 위해 jsFiddle을 만들었습니다 .

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

제공하신 jsfiddle 데모를 실행할 수 없습니다. 업데이트 해 주시겠습니까?
Lucky

괜찮아. 데모를 실행할 수없는 이유는 선택한 라이브러리가 잘못된 URL을 가리키고 있기 때문입니다. 여기에 업데이트 된 jsfiddle
Lucky

답변:


214

문서의 "선택한 항목을 동적으로 업데이트"섹션에서 : 필드에서 'chosen : updated'이벤트를 트리거해야합니다.

$(document).ready(function() {

    $('select').chosen();

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

});

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

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

6
참고 : 그들은 지금 사용하는 1.0으로 업데이트 한 chosen:updated대신liszt:updated
Henesnarfel

다중 선택 선택한 검색 결과 목록에서 현재 가장 일치하는 옵션을 선택하는 방법을 찾으려고 할 때 여기에서 우연히 발견했습니다 (포커스가 손실 될 때마다). 여기 내 탐험에 대한 짧은 바이올린이 있습니다. 이벤트를 트리거 할 필요가 없습니다. 아마, 그것은 :) ... 너무 다른 사람에게 소용이
티모

위의 코드가 작동 함에도 불구하고 이것은 한 번만 발생합니다. 선택한 플러그인이 연결된 메뉴를 다시 클릭하면 val () 안에있는 값이 적용되지 않습니다. 왜 이런 일이 발생할 수 있는지
Dimitris Papageorgiou

9
나는 이것이 오래된 포스트라는 것을 알고 있습니다. 그러나 업데이트하는 더 간단한 방법은 단지 하나의 문자열에 있습니다. $('select').val(2).trigger("chosen:updated");
Andrew Newby

10
@Lucas Welper : 당신은 또한 변경해야합니다 $('select').val(2);으로 $('select').val(2).change();jQuery를 가진 선택의 선택 옵션을 변경하면 변경 이벤트를 트리거하지 않기 때문에, 일부 사람들이 그것을해야 할 수도 있습니다.
machineaddict 2015 년

41

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

1) 선택한 선택에서 단일 값을 선택하려면.

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

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

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

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


예를 들어 <option value = "25">
sometext

2

때때로 선택한 옵션을 조작하기 위해 현재 옵션을 제거해야합니다.

다음은 옵션을 설정하는 방법의 예입니다.

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


1
선택은 아직 업데이트가 값이없는 경우에 대한 계정 var selected = mySelect.val();var selected = mySelect.val() || [];대신.
ElliotSchmelliot

0

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

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');
});
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.