我正在尝试使用 Chosen 插件更改当前选择的选项。
该文档涵盖更新列表,并在选择选项时触发事件,但没有(我可以看到)从外部更改当前选定的值。
我制作了一个jsFiddle 来演示代码和我尝试更改选择的方法:
$('button').click(function() {
$('select').val(2);
$('select').chosen().val(2);
$('select').chosen().select(2);
});
我正在尝试使用 Chosen 插件更改当前选择的选项。
该文档涵盖更新列表,并在选择选项时触发事件,但没有(我可以看到)从外部更改当前选定的值。
我制作了一个jsFiddle 来演示代码和我尝试更改选择的方法:
$('button').click(function() {
$('select').val(2);
$('select').chosen().val(2);
$('select').chosen().select(2);
});
从文档中的“动态更新选择”部分:您需要在该字段上触发“选择:更新”事件
$(document).ready(function() {
$('select').chosen();
$('button').click(function() {
$('select').val(2);
$('select').trigger("chosen:updated");
});
});
注意:1.0 之前的版本使用以下内容:
$('select').trigger("liszt:updated");
有时您必须删除当前选项才能操作选定的选项。
以下是如何设置选项的示例:
<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/
如果有多种类型的选择和/或如果您想直接在下拉列表项中删除已选择的项目,则可以使用以下内容:
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');
});