Select2自动触发事件更改 [英] Select2 auto trigger event change

问题描述

我有4个选择框，当我更改第一个选择框时，请进行一些操作，例如，清空，添加并设置下一个的新值.

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.

因为我使用select2，可以使用$ .select2('val'，'value');

Because I use select2 just can set it using $.select2('val','value');

只是该命令在另一个选择上触发了change事件并进行级联更改.

Just that command trigger the change event on the other select and do cascade of changes.

请注意，.empty()和append()不会触发(我也喜欢这样)，即使.val()也不应触发它，但是当您使用select2时，您将无法使用它访问新的val.

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.

此处的代码:

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

这是一个不错的选择，但对我不起作用清除select2而不触发更改事件

This was a pretty one but it did not work for me Clear select2 without triggering change event

他建议使用类似的东西

$docInput.select2('data', null, false);

我只需要设置新选择的选项，而无需触发更改事件.使用select2插件时，.select2("val"，"x")有什么替代方法吗?

I just need set the new selected option without trigger the change event. Any alternative to .select2("val", "x") while using select2 plugin?

推荐答案

select2 4.0要求在更改值时调用底层元素的标准.val()属性.有关详细信息，请参见 https://select2.github上select 4.0公告的底部. io/announcements-4.0.html .

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.

要选择值，请使用:

//Select value without triggering change event
$(destino).val('x');

//Select value and trigger change event
$(destino).val("x").trigger("change")

请注意，由于附加选项的方式，必须首先重新初始化select2以确保选择了该值.即

Please note, due to the way options are being appended you must re-initialize select2 first to ensure the value is selected. i.e.

//Re-initialize and set value without triggering change event
$(destino).select2();
$(destino).val('x');

请参见以下小提琴中的工作示例 https://jsfiddle.net/wfkxdjr6/.

Please see the following fiddle for a working example https://jsfiddle.net/wfkxdjr6/.

这篇关于Select2自动触发事件更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！