使用Chosen插件更改选择中的选择

Question

我正在尝试使用Chosen插件更改select中当前选择的选项。

documentation涵盖更新列表，并在选择选项时触发事件，但在外部更改当前选定的值时没有（我可以看到）。

我做了一个jsFiddle to demonstrate the code和我试图改变选择的方法：

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

Answer 1

从docs中的“更新动态选择”部分：您需要在该字段上触发“selected：updated”事件

$(document).ready(function() {

    $('select').chosen();

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

});

注意：1.0之前的版本使用以下内容：

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

Answer 2

我的答案很晚，但我想补充一些上述答案中遗漏的信息。

1）如果要在所选的选择中选择单个值。

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

2）如果您使用多个选择的选择，那么您可能需要一次设置多个值。

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

从以下链接收集的信息： 1）Chosen Docs 2）Chosen Github Discussion

Answer 3

有时您必须删除当前选项才能操作所选选项。

以下是如何设置选项的示例：

<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（包括如何附加选项）：qazxsw poi

Answer 4

如果有多种类型的选择和/或如果要逐个删除已选择的项目，直接在下拉列表项目中，您可以使用以下内容：

https://jsfiddle.net/59x3m6op/1/