Select2 字段 .value 属性不会在 .onchange 函数内更改

Question

我遇到了这个非常具体的问题，我无法找到解决方案。 我有一个 Select2 字段，在选择特定公司后，它将根据在 Select2 字段上触发的 .onchange 函数上的 API 获取的值自动填充相应的国家/地区，您可以从中选择相应的公司来获取。

除此之外的所有其他自动填充字段都将填充相应的值，但仅选择但未显示的国家/地区值的 Select2 字段已选择。

但是，如果我尝试在 .onchange 函数之外更改 .value 属性，该字段会完全更改并在列表中显示当前选择的国家/地区。

我已经尝试通过使用原始 JavaScript 更改 .value 属性并按照Select2 documentation 上的建议使用带有 JQuery 的 .val 方法来执行该函数，但是会出现相同的结果，这里我附上代码和一些屏幕截图.

const countryField = document.querySelector(
    'select[name=' + country + ']'
)

selectField.onchange=function() {
    const apiUrl = new URL(url)
    const params = {q: $(this).val()}
    apiUrl.search = new URLSearchParams(params).toString();
    fetch(apiUrl)
        .then((response) => response.json())
        .then(function(data) {
            const fieldsToUpdate = [
                {field:addressLine1Field,value:data.address_line1},
                {field:addressLine2Field,value:data.address_line2},
                {field:cityDistrictField,value:data.city_district},
                {field:stateProvinceField,value:data.state_province},
                {field:postalCodeField,value:data.postal_code},
                {field:countryField,value:data.country},
            ]
            for (const { field,value } of fieldsToUpdate) {
                if (!!field) {
                    field.value = ''
                    if (!!value) {
                        field.value = value
                    }
                }
            }
        })
        .catch(function(error) {
           console.log(error);
        });
}

在函数外部更改属性会导致：

const countryField = document.querySelector(
    'select[name=' + country + ']'
)
countryField.value = 'Canada'

到目前为止，我仍然不确定是什么让属性更改在 .onchange 方法中执行时在 DOM 上的工作方式有所不同。 如果有人可能知道它可能是什么，任何帮助将不胜感激。 谢谢大家。

Answer 1

这是一个工作示例。

$('#company').select2();
$('#country').select2();

$('#company').on('select2:select', function (e) {
  $('#country').val('CA').trigger('change');

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

Company
<select class="js-example-basic-single" name="state" id="company">
  <option value="1">XXX</option>
  <option value="2">YYY</option>
</select>
</br>
Country
<select class="js-example-basic-single" id="country" >
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
  <option value="CA">Canada</option>
</select>