Select2自动触发事件更改

Question

Select2自动触发事件更改

javascriptjqueryeventsjquery-select2

15

我有4个下拉框，当我改变第一个下拉框时，会进行一些操作，例如清空、追加和设置新值给下一个下拉框。

因为我使用了select2，所以只能使用$.select2('val','value')来设置它的值。

仅凭这个命令就可以触发其他下拉框的更改事件并进行级联更改。

请注意，.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);
});

这是一个不错的建议，但对我并没有起作用清除Select2但不触发change事件

他建议使用类似以下的方法

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

我只需要设置新选择的选项，而不触发更改事件。在使用select2插件时，有没有 .select2("val", "x") 的替代方案？

- Daniel Zambrano

3个回答

6

无需每次手动触发trigger('change')。

设置数值：

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

最后再次初始化select2：

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

- Mobarok Hossen

对我来说有效，谢谢。 - Hoang Son

0

试试这个：

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

- Mahydul Islam Shajal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris C · Accepted Answer

在更改值时，select2 4.0要求调用底层元素的标准 .val() 属性。具体细节可以在 select2 4.0公告底部查看：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，以确保所选值已被选择。例如：

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

请查看以下 jsfiddle 的工作示例： https://jsfiddle.net/wfkxdjr6/。