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?

Emigrate

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

Conflation

I am using select2 4 version, your solution is not working. – Psychomotor

@Psychomotor the jsfiddle above uses version 4.0.0 at cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js and appears to still function correctly. Further details on the issue you are facing would be needed to investigate further, perhaps you could open a new question with the issue you are seeing? It's likely that changes have occurred in the years since this question was answered if you are using a more recent than 4.0.0, the comment from Wolfgang above appears to indicate they have. – Conflation

Looking further at the latest version of Select2 (4.0.6-rc.0) this solution still appears to function correctly, updated fiddle using this version can be found at jsfiddle.net/qmx4a1f5. The programmatic methods for controlling options do not appear to provide a better method for clearing options without reinitialization of select2. – Conflation

Too funny. For some reason, I lose the ability to scroll on the web page after applying this. – Danforth

Answer 2

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

Set Value:

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

Finally initialize again select2:

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

Harlem

Answer 3

Try this:

$('#ddlUnit').val(8).select2();

Stench