Javascript Select2 自动触发事件变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31690487/
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
Select2 auto trigger event change
提问by Daniel Zambrano
I have 4 select boxes, when I change the first one do some stuff like empty, append and SET the new value for the next one.
我有 4 个选择框，当我更改第一个选择框时，会执行一些操作，例如清空、追加和设置下一个的新值。
Because I use select2 just can set it using $.select2('val','value');
因为我使用 select2 只能使用 $.select2('val','value'); 设置它。
Just that command trigger the change event on the other select and do cascade of changes.
只是该命令触发另一个选择上的更改事件并进行级联更改。
Notice that .empty() and append() wont trigger (and i like that), even .val() should not trigger it, but when ure using select2 you can't access the new val using that.
请注意， .empty() 和 append() 不会触发（我喜欢），甚至 .val() 也不应该触发它，但是当您使用 select2 时，您无法使用它访问新的 val。
Code here:
代码在这里：
function anidado(selectorOrigen,selectorDestino) {
id = selectorOrigen;
alert(id);
destino = "#"+selectorDestino;
valor = $('#'+id).find(":selected").val();
$.ajax({
method: "GET",
url: "blanco2.php",
data: { select: id, valor: valor }
})
.done(function( msg ) {
obj = $.parseJSON( msg );
if (obj.length>0) {
$(destino).empty().append('<option value="x">Select an ---</option>').select2("val", "x");
$.each(obj,function(index) {
valor = obj[index].codigo;
texto = obj[index].descripcion;
$(destino).append('<option value=' + valor + '>' + texto + '</option>');
$(destino).prop("readonly",false);
});
} else {
$(destino).empty().append('<option value=""></option>').select2("val", "");
}
});
return false;
}
$( "select" ).change(function() {
selectorOrigen = this.id;
if (selectorOrigen === 'pais') {
selectorDestino = 'ua';
} else if (selectorOrigen === 'ua') {
selectorDestino = 'unidad';
} else if (selectorOrigen === 'unidad') {
selectorDestino = 'rol';
} else if (selectorOrigen === 'rol') {
selectorDestino = 'categoria';
} else { return false; }
anidado(selectorOrigen,selectorDestino);
});
This was a pretty one but it did not work for me Clear select2 without triggering change event
这是一个漂亮的，但它对我不起作用清除 select2 而不触发更改事件
He suggest use something like
他建议使用类似
$docInput.select2('data', null, false);
I just need set the new selected option without trigger the change event. Any alternative to .select2("val", "x") while using select2 plugin?
我只需要设置新的选定选项而不触发更改事件。使用 select2 插件时 .select2("val", "x") 的任何替代方法？
回答by Chris C
select2 4.0 requires the standard .val() attribute of the underlying element to be called when changing the value. Details of this can be seen at the bottom of the select 4.0 announcement at https://select2.github.io/announcements-4.0.html.
select2 4.0 要求在更改值时调用底层元素的标准 .val() 属性。有关详细信息，请参见https://select2.github.io/announcements-4.0.html上的 select 4.0 公告底部。
To select the value you should use:
要选择您应该使用的值：
//Select value without triggering change event
$(destino).val('x');
//Select value and trigger change event
$(destino).val("x").trigger("change")
Please note, due to the way options are being appended you must re-initialize select2 first to ensure the value is selected. i.e.
请注意，由于附加选项的方式，您必须先重新初始化 select2 以确保选择该值。IE
//Re-initialize and set value without triggering change event
$(destino).select2();
$(destino).val('x');
Please see the following fiddle for a working example https://jsfiddle.net/wfkxdjr6/.
请参阅以下小提琴以获取工作示例https://jsfiddle.net/wfkxdjr6/。
