问题描述
我遇到了这个非常具体的问题,我无法找到解决方案。 我有一个 Select2 字段,在选择特定公司后,它将根据从 API 上的 .onchange 函数中获取的值自动填充相应的国家/地区.
除了这个字段之外的所有其他自动填充字段,都填充了它的相应值,除了 Select2 字段的国家值只被选中但未显示已选择。
但是,如果我尝试在 .onchange 函数之外更改 .value 属性,该字段会完全更改并在列表中显示当前选定的国家/地区。
我已经尝试通过使用 vanilla 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'
到目前为止,我仍然不确定是什么使属性更改在 DOM 上的工作方式不同,同时在 .onchange 方法中执行它。 如果那里的任何人可能知道它可能是什么,任何帮助将不胜感激。 谢谢大家。
解决方法
这是一个工作示例。
$('#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>