本文旨在解决在使用select2实现两个联动下拉框互斥清空时，因不当触发change事件导致的无限递归调用和栈溢出错误。核心解决方案是，在通过javascript程序化清空select2选值时，应直接使用val([])方法，避免额外调用change()方法，从而防止不必要的事件触发，确保系统稳定运行。
问题场景描述
在Web开发中，我们经常会遇到两个或多个表单元素之间存在联动关系的需求。例如，在地理位置选择中，可能需要设置“黑名单”和“白名单”两个多选下拉框，但业务规则要求用户只能选择其中一个列表。当用户在“黑名单”中进行选择时，“白名单”应自动清空；反之亦然。
以下是一个典型的HTML结构，使用了jQuery和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>在这个实现中，每个select元素的onchange事件处理器都尝试清空另一个select的选中项，并通过.change()方法触发其change事件。然而，这种看似合理的逻辑却会导致一个严重的运行时错误：
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)
这个错误提示“Maximum call stack size exceeded”（最大调用栈大小超出），表明代码进入了无限递归循环。
问题分析
出现“Maximum call stack size exceeded”错误的原因在于事件的无限循环触发。让我们详细分析一下：
- 当用户在#blacklist下拉框中选择一个选项时，#blacklist的onchange事件被触发。
- onchange="$('#whitelist').val([]).change();" 这行代码执行：
- $('#whitelist').val([])：这部分代码会清空#whitelist下拉框的当前选中项。
- .change()：这部分是问题的核心。它会显式地触发#whitelist下拉框的change事件。
- 当#whitelist的change事件被触发时，其onchange="$('#blacklist').val([]).change();" 代码被执行。
- 同样地，这行代码会清空#blacklist的选中项，并再次显式触发#blacklist的change事件。
- 这个过程无限重复：#blacklist的change触发#whitelist的change，#whitelist的change又触发#blacklist的change，形成一个死循环。
- 每次事件触发都会在调用栈中增加新的函数调用，直到调用栈溢出，导致RangeError。
解决方案
要解决这个无限循环问题，关键在于理解val()方法和change()方法的区别。
- $('#id').val([])：这个方法用于设置或获取元素的值。当用于设置值时，它会修改DOM元素的状态，但默认情况下并不会触发该元素的change事件。
- $('#id').change()：这个方法用于显式触发元素的change事件。
因此，当我们需要通过JavaScript程序化地清空一个select元素的值时，我们只需要修改其值，而不需要触发其change事件，因为触发change事件会导致另一个select被清空，从而再次触发当前select的change事件。
正确的做法是移除onchange事件处理器中的.change()调用。
示例代码
以下是修正后的HTML和JavaScript代码：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 确保引入了Select2的CSS和JS文件 -->
<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.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([]);"> <!-- 移除 .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>
<script>
// 初始化Select2
$(document).ready(function() {
$('.select2').select2();
});
</script>通过以上修改，当用户在#blacklist中选择时，#whitelist的值会被清空，但不会触发#whitelist的change事件，从而避免了无限循环。反之亦然。
注意事项
事件触发与值设置分离： 在进行DOM元素值设置时，要明确是否需要同时触发其相关的事件。如果不需要，就不要显式调用trigger()或change()等事件触发方法。
Select2的特殊性： Select2插件在内部处理change事件时，可能会有其特定的逻辑。通常，当Select2的选项通过用户交互改变时，它会自动触发底层的select元素的change事件。因此，在onchange事件中再显式触发另一个Select2的change事件，很容易导致循环。
-
代码可读性与维护： 将JavaScript逻辑从HTML的onchange属性中分离出来，使用jQuery的on()方法进行事件绑定，可以提高代码的可读性和可维护性。例如：
$(document).ready(function() { $('.select2').select2(); $('#blacklist').on('change', function() { $('#whitelist').val([]).trigger('change'); // 如果需要Select2内部更新视图，可能需要trigger('change')，但要注意避免循环 }); $('#whitelist').on('change', function() { $('#blacklist').val([]).trigger('change'); // 同上 }); });然而，上述使用trigger('change')仍然会陷入循环。 如果需要Select2的视图更新（例如，清空后显示placeholder），正确的做法是：
$(document).ready(function() { $('.select2').select2(); $('#blacklist').on('change', function() { // 仅清空值，不触发另一个Select2的change事件 // 如果需要Select2的视图更新，可以手动调用其API，或者让Select2知道值已改变 $('#whitelist').val([]).trigger('change.select2'); // 触发Select2自身的change事件，而不是原生的 }); $('#whitelist').on('change', function() { $('#blacklist').val([]).trigger('change.select2'); }); });使用trigger('change.select2')是Select2推荐的方式，它会通知Select2实例值已改变，并更新其UI，但不会触发原始select元素的onchange属性中定义的事件，从而避免了无限循环。
总结
在实现Select2或其他表单元素的联动清空逻辑时，务必注意事件触发机制。当通过JavaScript程序化地设置元素值时，如果不需要引发额外的副作用（例如触发其他元素的联动逻辑），则应避免显式调用.change()方法。如果需要Select2更新其视图，可以使用trigger('change.select2')来安全地通知Select2实例。理解这些细微差别是编写健壮且无循环的交互式前端代码的关键。
