select2：更改选项时清除多选下拉选择字段和另一个相关多选下拉列表

如何解决select2：更改选项时清除多选下拉选择字段和另一个相关多选下拉列表

我创建了 2 个多选下拉菜单（如下面的 HTML 片段所示）。这些选项是使用 js 脚本从数据库动态获取的。我想在更改选项或单击下拉列表的选择字段时清除所选字段。 场景是：

1. 在更改第一个下拉列表值时清除两个下拉列表或单击它。
2. 清除更改或点击的第二个下拉菜单。

我无法弄清楚如何实现这一点。

我尝试过类似的方法，但没有成功。

Javascript：

$(document).ready(function(){
    $("#js-business-unit").on('change',function(){
        $("#js-business-unit").val(null).trigger("change");
    })
})

HTML：

<div class="me-2" id="business_units">
        <input type="hidden" name="business_unit">
        <select name="business-unit" multiple="multiple" class="js-business-unit" id="business_unit-data-Box",style="width:320px;">
            </select>
        <br>
        <div class="spinner-class spinner-grow spinner-grow-sm" role="status" id="buspinner">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
    <br>
    <div class="ms-2" id="sp_units">
          <input type="hidden" name="software-product-input">
          <select name="software-product-select" multiple="" class="js-software-product" id="sp_unit-data-Box" style="width:320px;">
          </select>
    </div>

请帮我解决这个问题。 谢谢！