提问人:Fabrício Matté 提问时间:6/23/2012 最后编辑:CommunityFabrício Matté 更新时间:3/7/2017 访问量:33525
jQuery Chosen 在通过 JS 更改值时不触发 onchange 事件
jQuery Chosen not firing onchange event when value is changed through JS
问:
JSFiddle
我已经在小提琴中设置了一个 3 秒(1 个空白)。当我从手动切换到时,侦听器正常触发。select
option
foo
bar
change
现在,如果我使用此处某些答案中发布的代码重置通过 JS,则不会为新选择的空白选项触发事件,此外,如果我选择在单击按钮之前选择的选项,则该事件也不会触发。select
change
reset
onchange
我确定上面的函数正在更改 的值,这可以在这把小提琴中看到,但 的事件根本没有触发。select
select
onchange
我也尝试过,,事件无济于事。现在我想知道我是否应该使用 MutationObserver 或从 DOM 中删除渲染的选定元素并创建另一个元素,但我可能想多了。任何帮助都是值得赞赏的。onchange
onclick
oninput
也:
这个答案对我帮助很大:jQuery Chosen 重置
这个答案没有帮助:如何在选定的原型javascript选择框中触发onchange事件?
如果 jsfiddle.net 被删除,供将来参考的代码:
[HTML全
<div id="wrapper">
<select id="chosen">
<option value="!!EMPTY VALUE!!"></option>
<option value="foo">foo</option>
<option value="bar">bar</option>
</select>
</div>
<br>
<button id="reset">Reset</button>
JS公司
$(function() {
$('#chosen').chosen();
$('#wrapper').on('change', '#chosen', function() {
console.log('onchange: ' + this.value);
});
$('#reset').click(function() {
$("#chosen").val('').trigger("liszt:updated"); //doesn't work
//$("#chosen").prop('selectedIndex', 0).trigger("liszt:updated"); //doesn't work either
console.log('reset: ' + $('option:selected').val());
});
});
答:
9赞
Adam Merrifield
6/23/2012
#1
您需要在更改值后触发更改$(selector).trigger("change")
$('#reset').click(function() {
$("#chosen").val('').trigger("change"); //doesn't work
//$("#chosen").prop('selectedIndex', 0).trigger("liszt:updated");
console.log('reset: ' + $('option:selected').val());
});
评论
0赞
Fabrício Matté
6/23/2012
仍然有 -> -> 不会触发最后一个,但我现在应该能够自己弄清楚。foo
reset
foo
foo
0赞
Adam Merrifield
6/23/2012
@FabrícioMatté功能是什么?.chosen
0赞
Fabrício Matté
6/23/2012
.chosen
是 Chosen 插件本身,它将 select 转换为选择,dw 它可能是他们代码中的一个错误,像往常一样。=]chosen
1赞
Fabrício Matté
6/23/2012
我已经解决了它,一个有点丑陋的解决方案,但是的,对于未来可能遇到同样问题的人:小提琴。$('#chosen_chzn').remove(); $('#chosen').val('').change().removeClass('chzn-done').chosen();
3赞
Fabrício Matté
6/23/2012
#chosen
是上面代码中 的 ID,所以一个更合适的解决方案: - Fiddle - 最后一点,Chosen 是我见过的最糟糕的插件,在添加新功能方面。select
var selId = 'chosen'; $('#'+selId+'_chzn').remove(); $('#'+selId).val('').change().removeClass('chzn-done').chosen();
5赞
Tyler
8/29/2012
#2
从法布里西奥·马特 (Fabrício Matté) 的评论中复制一个对我有用的答案,这样其他人就不会像我一样看到这篇文章并错过解决方案。
$('#chosen_chzn').remove();
$('#chosen').val('').change().removeClass('chzn-done').chosen();
我最初试图继续使用调用而不是 但没有用。没有看到背后的原因,但这也是必不可少的,否则您的选择框将消失。.trigger('liszt:updated')
.change()
.removeClass('chzn-done')
评论
3赞
Fabrício Matté
8/29/2012
实际上,我认为我已经找到了另一个“更好”的解决方案。不太确定。我想我刚刚升级到 Select 2,它只需调用原始输入即可触发事件。change
.change()
1赞
Fabrício Matté
8/29/2012
+1 虽然对于那些坚持选择的人来说,我不完全记得删除该类的原因,但我很确定这是因为适用于您调用的元素,并且使用该类调用 on 元素不起作用。chzn-done
chzn-done
display:none
select
.chosen()
.chosen()
1赞
Andy
11/14/2012
我相信如果您不删除 chzn-done,那么调用 chosen() 将无济于事 - 它认为它已经设置好了自己。有点像一个可怜的守卫。
评论