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“控制台日志。
为什么会发生这种事？
回答 3
Stack Overflow用户
发布于 2022-02-01 13:31:33
就像select2是jquery组件一样，您必须使用jquery选择器来绑定事件($('#xselect'))
现在可以将更改事件绑定到
$('#xselect').on('change', function(e) {您的事件侦听器将类似于
$('#xselect').on('change', function(e) {
console.log('input changed ');
});这是工作小提琴https://jsfiddle.net/kLv9pb4t/
$('#xselect').select2({
placeholder: 'Select a letter'
});
var formFrom = document.querySelector('#xform');
$('#xselect').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>
<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>
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用户
发布于 2022-02-01 13:39:02
试试这个：
$('#xselect').on('select2:select', function (e) {
var data = e.params.data;
console.log(data);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70941310
复制相关文章
相似问题
腾讯云开发者
