Select2 字段 .value 属性不会在 .onchange 函数内更改
Posted
技术标签:
【中文标题】Select2 字段 .value 属性不会在 .onchange 函数内更改【英文标题】:Select2 field .value property doesn't change inside .onchange function 【发布时间】:2021-04-13 21:39:40 【问题描述】:我遇到了这个非常具体的问题,我无法找到解决方案。 我有一个 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 上的工作方式有所不同。 如果有人可能知道它可能是什么,任何帮助将不胜感激。 谢谢大家。
【问题讨论】:
【参考方案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>
【讨论】:
执行 $('select[name=' + country + ']').val('X').trigger('change');正如Select2 documentation 所建议的那样,无论是在函数内部还是外部,都给出了之前显示的相同结果,我还尝试用 JQuery .change 函数替换 .onchange 函数,但是使用 .change 函数在公司字段上不起作用,由于某些未知原因,.change函数从未在现场触发,我不知道问题是否与函数方法本身有关。 在我的代码上使用 $('#company').on('select2:select', function (e) 没有,select 事件根本没有触发,如文档,我正在使用 Select2 和 NPM 中的 @ttskch/select2-bootstrap4-theme 包。以上是关于Select2 字段 .value 属性不会在 .onchange 函数内更改的主要内容,如果未能解决你的问题,请参考以下文章