本文旨在解决 select2 下拉菜单在联动清空时常见的“maximum call stack size exceeded”无限 循环 错误。核心问题在于当通过代码清空一个 select2 时，不应同时触发其 change事件 ，否则会导致两个下拉菜单之间反复互相清空。正确的做法是仅使用。val([]) 来清除选定值，避免不必要的事件触发，从而确保联动功能的稳定运行。
Select2 联动清空场景及常见问题
在 Web 开发中，我们经常会遇到需要实现表单元素之间联动的情况。例如，有两个多选下拉菜单（使用 Select2 插件），用户只能选择其中一个。当用户在一个下拉菜单中做出选择时，另一个下拉菜单应该被自动清空。
以下是实现这种联动逻辑的常见代码结构：
<div class="col-md-12"> <div class="form-group"> <label>Geo Blacklist</label> <select name="blacklist[]" multiple="multiple" id="blacklist" class="form-control select2" data-placeholder="Seleccionar uno o varios países" tabindex="1" onchange="$('#whitelist').val([]).change();"> <option>a</option> <option>b</option> <option>c</option> </select> </div> </div> <div class="col-md-12"> <div class="form-group"> <label>Geo Whitelist</label> <select name="whitelist[]" multiple="multiple" id="whitelist" class="form-control select2" data-placeholder="Seleccionar uno o varios países" tabindex="1" onchange="$('#blacklist').val([]).change();"> <option>x</option> <option>y</option> <option>z</option> </select> </div> </div>当用户尝试在这种设置下操作下拉菜单时，可能会遇到如下错误信息：
Uncaught RangeError: Maximum call stack size exceeded at RegExp.exec () at [Symbol.replace] () at String.replace () at Function.camelCase (jquery.js:346:17) at Function.style (jquery.js:6643:22) at jquery.js:6866:12 at jQuery.access (jquery.js:4142:5) at jQuery.fn.init.css (jquery.js:6849:10) at Search.resizeSearch (select2.full.js:2032:18) at DecoratedClass.resizeSearch (select2.full.js:580:32)这个错误通常表示发生了无限 递归 调用，即函数调用 栈溢出。
问题根源分析
上述错误的核心原因在于 onchange=”$(‘#whitelist’).val([]).change();” 这行代码。当用户在 #blacklist 下拉菜单中进行选择时：
- #blacklist 的 onchange 事件被触发。
- 代码执行 $(‘#whitelist’).val([])，这会清空 #whitelist 的选中项。
- 紧接着，代码执行。change()，这会 显式地触发#whitelist 的 change 事件。
- #whitelist 的 onchange 事件被触发，其中包含的代码是 $(‘#blacklist’).val([]).change();。
- 这又会清空 #blacklist 并 显式地触发#blacklist 的 change 事件。
如此往复，两个下拉菜单的 change 事件会无限循环地互相触发，导致调用 栈迅速耗尽，最终抛出“Maximum call stack size exceeded”错误。
解决方案：避免不必要的事件触发
解决这个问题的关键在于理解：当通过 javaScript 代码（例如 $.val([])）修改表单元素的值时，通常不需要再显式地调用。change() 来触发其 change 事件。$.val([])已经完成了清空操作，如果不需要后续的副作用（即触发该元素的 onchange处理器），就不应该再调用。change()。
因此，我们只需要移除 onchange 属性中的。change()方法即可。
修正后的代码示例
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-md-12"> <div class="form-group"> <label>Geo Blacklist</label> <select name="blacklist[]" multiple="multiple" id="blacklist" class="form-control select2" data-placeholder="Seleccionar uno o varios países" tabindex="1" onchange="$('#whitelist').val([]);"> <option>a</option> <option>b</option> <option>c</option> </select> </div> </div> <div class="col-md-12"> <div class="form-group"> <label>Geo Whitelist</label> <select name="whitelist[]" multiple="multiple" id="whitelist" class="form-control select2" data-placeholder="Seleccionar uno o varios países" tabindex="1" onchange="$('#blacklist').val([]);"> <option>x</option> <option>y</option> <option>z</option> </select> </div> </div>通过将 onchange=”$(‘#whitelist’).val([]).change();” 修改为 onchange=”$(‘#whitelist’).val([]);”，我们确保了在清空另一个 Select2 时，不会再触发其 change 事件，从而打破了无限循环。
注意事项与最佳实践
-
区分用户操作与程序操作： 用户通过界面交互触发的 change 事件通常是期望的，因为它们反映了用户意图。而通过 javascript 代码修改值时，是否触发 change 事件需要根据具体业务逻辑判断。在本例中，清空操作本身并不需要触发目标元素的 change 事件。
-
使用事件监听器： 尽管在简单的场景下使用 onchange 属性是可行的，但在更复杂的应用中，推荐将 JavaScript 逻辑从 html 中分离出来，使用事件监听器来处理：
$(document).ready(function() {$('#blacklist').on('change', function() {$('#whitelist').val([]).trigger('change'); // 如果清空后需要 Select2 重新渲染，则可能需要 trigger('change') // 但在本例中，Select2 的清空通常不需要显式 trigger }); $('#whitelist').on('change', function() {$('#blacklist').val([]).trigger('change'); // 同上 }); // 初始化 Select2 $('.select2').select2();});重要提示： 在上述 JavaScript 代码中，trigger(‘change’)同样可能导致无限循环。如果目标 Select2 只是需要被清空并更新显示，通常 $(‘#element’).val([]).trigger(‘change’)是正确的，因为 Select2 需要 change 事件来更新其内部状态和显示。然而，当两个 Select2 互相清空时，问题就出现了。
更安全的 JavaScript 事件处理方式，以避免无限循环：
$(document).ready(function() {// 初始化 Select2 $('.select2').select2(); $('#blacklist').on('change', function() {// 当 blacklist 改变时，清空 whitelist // 使用。select2('val', NULL) 或 .val([]).trigger('change') 让 Select2 知道值已改变 // 但为了避免无限循环，这里我们只设置值，不触发其 change 事件 if ($(this).data('isChanging') === true) {// 避免自身触发 return;} $('#whitelist').data('isChanging', true); // 标记 whitelist 正在被程序改变 $('#whitelist').val(null).trigger('change'); // 清空并让 Select2 更新显示 $('#whitelist').removeData('isChanging'); // 移除标记 }); $('#whitelist').on('change', function() {// 当 whitelist 改变时，清空 blacklist if ($(this).data('isChanging') === true) {// 避免自身触发 return;} $('#blacklist').data('isChanging', true); // 标记 blacklist 正在被程序改变 $('#blacklist').val(null).trigger('change'); // 清空并让 Select2 更新显示 $('#blacklist').removeData('isChanging'); // 移除标记 }); });进一步优化： 最直接的解决方案，如原始答案所示，就是当通过代码清空 Select2 时，不要 触发其 change 事件，因为 Select2 本身在接收到新的 val()值后会更新其显示。
$(document).ready(function() {// 初始化 Select2 $('.select2').select2(); $('#blacklist').on('change', function() {// 当 blacklist 改变时，清空 whitelist，不触发其 change 事件 $('#whitelist').val(null).trigger('change'); // 触发是为了让 Select2 更新显示，而非触发其 onchange处理器 }); $('#whitelist').on('change', function() {// 当 whitelist 改变时，清空 blacklist，不触发其 change 事件 $('#blacklist').val(null).trigger('change'); // 触发是为了让 Select2 更新显示，而非触发其 onchange 处理器 }); });最终结论： 原始问题的解决方案（移除。change()）是针对 onchange 属性中直接调用的情况。对于使用 $(selector).on(‘change’, …)绑定的事件处理器，如果处理器内部也包含 $(other_selector).val([]).trigger(‘change’)，则仍然可能导致无限循环。最佳实践是在程序性地清空或设置值时，如果不需要触发目标元素的其他副作用，就不要调用。trigger(‘change’)。如果 Select2 需要更新其视觉状态，val(null)或 val([])后，Select2 通常会自动处理，或者可以考虑使用 $(‘#id’).select2(‘data’, null)。
对于本教程的场景，最简洁且有效的修正仍然是 移除 onchange 属性中的。change()，因为 Select2 在接收到 val([])后会自行更新其视觉状态，无需手动触发事件。
总结
在 Select2 或其他表单元素的联动清空场景中，当通过 JavaScript 代码（如 $.val([])）设置或清空元素值时，务必注意是否需要显式触发其 change 事件。如果不需要额外的副作用处理，或者会引发无限循环，则应避免使用。change()。正确的做法是仅设置值，让元素自行更新状态，从而确保程序的稳定性和避免不必要的性能开销。
