Select2 auto trigger event change

Question

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.

Because I use select2 just can set it using $.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.

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

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?

Answer 1

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.

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.

//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/.