如何在更改另一个选择时清除选择(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)
我该怎么做?
只需删除
.change()
,因为它会触发其他
select
上的 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>
该问题与
select2
有关。更改已进行 select2 化的
<select>
值时,您必须调用
.change()
来更新 UI。
然后,这会触发第二个
select
更改事件,该事件会调用 .change 等,从而创建一个无限循环,如
Maximum call stack size reached
所示。
您不能简单地删除
.change()
,因为这样不会更新
select2
UI。
解决方案在 select2 中进行了描述文档
It's common for other components to be listening to the change event, or for custom event handlers to be attached that may have side effects [ such as an infinite loop ]. To limit the scope to only notify Select2 of the change, use the .select2 event namespace:
$('#mySelect2').val('US');
$('#mySelect2').trigger('change.select2'); // Notify only Select2 of changes
对于这个问题,应该将
onchange="$('#blacklist').val([]).change();">
更改为
onchange="$('#blacklist').val([]).trigger('change.select2');">
(白名单也一样)
这里有一个片段(和
fiddle
),演示了
change.select2
。编辑并将
change.select2
更改为
change
,您会得到无限循环。
$('.select2').select2();
$('#opt1').on('change', function() {
console.log($(this).val())
$("#opt2").val([]).trigger("change.select2");
});
$('#opt2').on('change', function() {
$("#opt1").val([]).trigger("change.select2");
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<select class="select2" id='opt1'>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
<select class="select2" id='opt2'>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>