select2不能正确触发更改事件
select2不能正确触发更改事件
提问于 2022-02-01 13:24:43
我有一个带有select元素的HTML表单。但是，我使用的是select2库。我想听听表单输入的变化。我添加了一个更改事件侦听器。但是，即使我更改了选项，也不会触发此事件。我已经手动添加了触发器，但仍然没有调用此更改事件。
表格
<form id="xform">
<select id="xselect">
<option value="A" selected="selected">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<input type="email" class="input-text" name="test" placeholder="" value="test">
</form>
<button onclick="trigger()">change</button>js
$('#xselect').select2({
placeholder: 'Select a letter'
});
var formFrom = document.querySelector('#xform');
formFrom.addEventListener('change', function(e) {
console.log('input changed ');
$('#xselect').trigger('change');
});
function trigger() {
$('#xselect').val('C');
$('#xselect').trigger('change');
}演示
https://jsfiddle.net/982zfnkL/6/
基本上，当我单击change按钮时，我希望看到"input“控制台日志。
为什么会发生这种事？
Stack Overflow用户
发布于 2022-02-01 13:33:45
需要将更改绑定到select
$('#xselect').select2({
placeholder: 'Select a letter'
})
.on('change', function(e) {
console.log('input changed ');
});
function trigger() {
$('#xselect').val('C');
$('#xselect').trigger('change');
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css">
<form id="xform">
<select id="xselect">
<option value="A" selected="selected">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<input type="email" class="input-text" name="test" placeholder="" value="test">
</form>
<button onclick="trigger()">change</button>
此代码将循环，因为更改将触发更改。
var formFrom = document.querySelector('#xform');
formFrom.addEventListener('change', function(e) {
console.log('input changed ');
$('#xselect').trigger('change');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70941310
复制相关文章
相似问题
腾讯云开发者
