更改另一個時如何清除 select (select2)

Question

我有這兩個選擇，我一次只需要 select 一個：

<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 得到任何人時：

未捕獲的 RangeError：RegExp.exec () 在 [Symbol.replace] () 在 String.replace () 在 Function.camelCase (jquery.js:346:17) 在 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) 在 DecoratedClass.resizeSearch (select2.full.js:580:32)

我怎樣才能做到這一點？

Answer 1

只需刪除.change()因為它觸發另一個select上的更改事件並進行無限循環

 <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>

Answer 2

這個問題與select2有關。 更改已被 select2 化的<select>值時，您必須調用.change()來更新 UI。

然后這會觸發第二個select更改事件，它調用.change 等，創建一個無限循環，如Maximum call stack size exceeded所示。

您不能簡單地刪除.change() ，因為那樣不會更新select2 UI。

解決方案在select2 文檔中進行了描述

其他組件偵聽更改事件或附加可能具有副作用的自定義事件處理程序（例如無限循環）是很常見的。 要將 scope 限制為僅通知 Select2 更改，請使用 .select2 事件命名空間：

$('#mySelect2').val('US');
$('#mySelect2').trigger('change.select2'); // Notify only Select2 of changes

在這個問題的情況下，這將是改變

onchange="$('#blacklist').val([]).change();">

至

onchange="$('#blacklist').val([]).trigger('change.select2');">

（白名單也一樣）

這是一個演示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>