Javascript 使用 Chosen 插件更改选择中的选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8980131/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing selection in a select with the Chosen plugin
提问by gak
I'm trying to change the currently selected option in a select with the Chosen plugin.
我正在尝试使用 Chosen 插件更改选择中当前选定的选项。
The documentationcovers updating the list, and triggering an event when an option is selected, but nothing (that I can see) on externally changing the currently selected value.
该文档包括更新列表和在选择选项时触发事件，但没有（我可以看到）从外部更改当前选定的值。
I have made a jsFiddle to demonstrate the codeand my attempted ways of changing the selection:
我制作了一个jsFiddle 来演示代码和我尝试更改选择的方法：
$('button').click(function() {
$('select').val(2);
$('select').chosen().val(2);
$('select').chosen().select(2);
});
回答by Lucas Welper
From the "Updating Chosen Dynamically" section in the docs: You need to trigger the 'chosen:updated' event on the field
从文档中的“动态更新选择”部分：您需要在该字段上触发 'chosen:updated' 事件
$(document).ready(function() {
$('select').chosen();
$('button').click(function() {
$('select').val(2);
$('select').trigger("chosen:updated");
});
});
NOTE: versions prior to 1.0 used the following:
注意：1.0 之前的版本使用以下内容：
$('select').trigger("liszt:updated");
回答by Aamir
My answer is late, but i want to add some information that is missed in all above answers.
我的回答晚了，但我想补充一些上述所有答案中遗漏的信息。
1) If you want to select single value in chosen select.
1) 如果要在选定的选择中选择单个值。
$('#select-id').val("22").trigger('chosen:updated');
2) If you are using multiple chosen select, then may you need to set multiple values at single time.
2）如果您使用多选选择，那么您可能需要一次设置多个值。
$('#documents').val(["22", "25", "27"]).trigger('chosen:updated');
Information gathered from following links:
1) Chosen Docs
2) Chosen Github Discussion
从以下链接收集的信息：
1)选择的文档
2)选择的 Github 讨论
回答by Tobi G.
Sometimes you have to remove the current options in order to manipulate the selected options.
有时您必须删除当前选项才能操作所选选项。
Here is an example how to set options:
以下是如何设置选项的示例：
<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 (including howto append options): https://jsfiddle.net/59x3m6op/1/
JSFiddle（包括如何附加选项）：https://jsfiddle.net/59x3m6op/1/
回答by SlavisaPetkovic
In case of multipletype of select and/or if you want to remove already selected items one by one, directly within a dropdown list items, you can use something like:
对于多种类型的选择和/或如果您想直接在下拉列表项中一个一个地删除已选择的项目，您可以使用以下内容：
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');
});
