本文旨在解决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()。正确的做法是仅设置值，让元素自行更新状态，从而确保程序的稳定性和避免不必要的性能开销。