使用 Chosen 插件在 select 中更改选择内容

我试图改变当前选择的选项在一个选择与选择插件。

文件包括更新列表,以及在选择一个选项时触发一个事件,但是在外部更改当前选择的值时没有触发任何事件(我可以看到)。

我已经做了一个 JsFiddle 来演示代码和我试图改变选择的方法:

$('button').click(function() {
$('select').val(2);
$('select').chosen().val(2);
$('select').chosen().select(2);
});
154428 次浏览

医生中的“ UpdatingChosingDynamical”部分: 您需要在字段上触发“ select: update”事件

$(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) < a href = “ http://harvesthq.github.io/select/”> Chosen Docs
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/

对于 多个类型的 select 和/或者如果您想要一个一个地删除已经选择的项目,直接在下拉列表项目中,您可以使用如下内容:

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