Select2 自动触发事件变化
Select2 auto trigger event change
我有 4 个 select 盒子,当我更改第一个盒子时,做一些事情,比如清空、追加并为下一个盒子设置新值。
因为我用的是select2就可以用$.select2('val','value');
设置
只有那个命令会触发另一个 select 上的更改事件并进行级联更改。
请注意 .empty() 和 append() 不会触发(我喜欢这样),甚至 .val() 也不应该触发它,但是当你使用 select2 时,你无法访问使用它的新 val。
代码在这里:
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);
});
这个很漂亮,但对我不起作用Clear select2 without triggering change event
他建议使用类似
的东西
$docInput.select2('data', null, false);
我只需要设置新的 selected 选项而不触发更改事件。使用 select2 插件时,是否有替代 .select2("val", "x") 的方法?
select2 4.0 要求在更改值时调用底层元素的标准 .val() 属性。详细信息可以在 https://select2.github.io/announcements-4.0.html 的 select 4.0 公告底部看到。
到select你应该使用的值:
//Select value without triggering change event
$(destino).val('x');
//Select value and trigger change event
$(destino).val("x").trigger("change")
请注意,由于附加选项的方式,您必须先重新初始化 select2 以确保 selected 值。即
//Re-initialize and set value without triggering change event
$(destino).select2();
$(destino).val('x');
请参阅以下 fiddle 的工作示例 https://jsfiddle.net/wfkxdjr6/。
不必每次都trigger('change')
。
设置值:
$('#select').val(value);
最后再次初始化select2:
$('#select').select2();
我有 4 个 select 盒子,当我更改第一个盒子时,做一些事情,比如清空、追加并为下一个盒子设置新值。
因为我用的是select2就可以用$.select2('val','value');
设置只有那个命令会触发另一个 select 上的更改事件并进行级联更改。
请注意 .empty() 和 append() 不会触发(我喜欢这样),甚至 .val() 也不应该触发它,但是当你使用 select2 时,你无法访问使用它的新 val。
代码在这里:
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);
});
这个很漂亮,但对我不起作用Clear select2 without triggering change event
他建议使用类似
的东西$docInput.select2('data', null, false);
我只需要设置新的 selected 选项而不触发更改事件。使用 select2 插件时,是否有替代 .select2("val", "x") 的方法?
select2 4.0 要求在更改值时调用底层元素的标准 .val() 属性。详细信息可以在 https://select2.github.io/announcements-4.0.html 的 select 4.0 公告底部看到。
到select你应该使用的值:
//Select value without triggering change event
$(destino).val('x');
//Select value and trigger change event
$(destino).val("x").trigger("change")
请注意,由于附加选项的方式,您必须先重新初始化 select2 以确保 selected 值。即
//Re-initialize and set value without triggering change event
$(destino).select2();
$(destino).val('x');
请参阅以下 fiddle 的工作示例 https://jsfiddle.net/wfkxdjr6/。
不必每次都trigger('change')
。
设置值:
$('#select').val(value);
最后再次初始化select2:
$('#select').select2();