Select2 自动触发事件变化

Posted 2023-05-07

【中文标题】Select2 自动触发事件变化

【英文标题】：Select2 auto trigger event change

【发布时间】：2015-10-19 20:18:12

【问题描述】：

我有 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);
);

这是一个漂亮的，但它不适合我Clear select2 without triggering change event

他建议使用类似的东西

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

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

【参考方案1】：

select2 4.0 需要在更改值时调用底层元素的标准 .val() 属性。可以在https://select2.github.io/announcements-4.0.html 的选择 4.0 公告的底部看到这方面的详细信息。

要选择你应该使用的值：

//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');

请参阅以下小提琴以获取工作示例https://jsfiddle.net/wfkxdjr6/。

【讨论】：

我使用的是 select2 4 版本，你的解决方案不起作用。

@Kamlesh 上面的 jsfiddle 在cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js 使用 4.0.0 版，并且似乎仍然可以正常工作。需要进一步调查您所面临的问题的更多详细信息，也许您可​​以针对您所看到的问题提出一个新问题？如果您使用的是比 4.0.0 更新的版本，自回答此问题以来的几年中可能发生了变化，上面 Wolfgang 的评论似乎表明它们已经发生了变化。

进一步查看最新版本的 Select2 (4.0.6-rc.0) 这个解决方案似乎仍然可以正常工作，使用这个版本的更新小提琴可以在 jsfiddle.net/qmx4a1f5 找到。在不重新初始化 select2 的情况下，控制选项的编程方法似乎无法提供更好的清除选项的方法。

【参考方案2】：

不必每次都trigger('change')。

设定值：

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

最后再次初始化select2：

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