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

Instead of having to trigger('change') every time.

Set Value:

$('#select').val(value);

Finally initialize again select2:

$('#select').select2();