113

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

文档涵盖更新列表,并在选择选项时触发事件,但没有(我可以看到)从外部更改当前选定的值。

我制作了一个jsFiddle 来演示代码和我尝试更改选择的方法:

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

4 回答 4

226

从文档中的“动态更新选择”部分:您需要在该字段上触发“选择:更新”事件

$(document).ready(function() {

    $('select').chosen();

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

});

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

$('select').trigger("liszt:updated");
于 2012-01-23T23:40:34.517 回答
48

我的回答迟了,但我想添加一些上述所有答案中遗漏的信息。

1)如果你想在选择的选择中选择单个值。

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

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

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

从以下链接收集的信息:
1)选择的文档
2)选择的Github 讨论

于 2016-02-21T13:59:27.577 回答
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(包括如何附加选项): https ://jsfiddle.net/59x3m6op/1/

于 2016-12-03T11:31:39.660 回答
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');
});
于 2019-03-05T17:18:21.013 回答