Thay đổi lựa chọn trong một lựa chọn bằng plugin Chosen

Tôi đang cố gắng thay đổi tùy chọn hiện được chọn trong một lựa chọn bằng plugin Chosen.

Các tài liệu bìa cập nhật danh sách, và gây ra một sự kiện khi một tùy chọn được chọn, nhưng không có gì (mà tôi có thể nhìn thấy) về việc thay đổi bên ngoài giá trị hiện đang được chọn.

Tôi đã tạo một jsFiddle để chứng minh mã và những cách tôi đã cố gắng thay đổi lựa chọn:

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

Từ phần "Cập nhật động được chọn" trong tài liệu : Bạn cần kích hoạt sự kiện 'đã chọn: đã cập nhật' trên trường

$(document).ready(function() {

    $('select').chosen();

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

});

LƯU Ý: các phiên bản trước 1.0 sử dụng như sau:

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

Câu trả lời của tôi là muộn, nhưng tôi muốn bổ sung một số thông tin bị thiếu trong tất cả các câu trả lời trên.

1) Nếu bạn muốn chọn một giá trị duy nhất trong lựa chọn đã chọn.

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

2) Nếu bạn đang sử dụng nhiều lựa chọn đã chọn, thì bạn có thể cần đặt nhiều giá trị cùng một lúc.

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

Thông tin thu thập từ các liên kết sau:
1) Tài liệu được chọn
2) Thảo luận trên Github được chọn

Đôi khi bạn phải xóa các tùy chọn hiện tại để thao tác với các tùy chọn đã chọn.

Đây là một ví dụ về cách đặt các tùy chọn:

<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 (bao gồm các tùy chọn nối thêm cách thức): https://jsfiddle.net/59x3m6op/1/

Trong trường hợp có nhiều loại lựa chọn và / hoặc nếu bạn muốn xóa từng mục đã chọn, ngay trong danh sách các mục thả xuống, bạn có thể sử dụng một số thứ như:

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');
});