3依赖Select2导致无限循环
使用select2样式3依赖下拉菜单导致我的项目很多麻烦。3依赖Select2导致无限循环
用例:有3个下拉菜单:A,B和C.C可以单独选择,A必须有非默认值B,反之亦然。 在没有select2的情况下执行此操作很容易,但使用.select2("val"
而不是简单的.val(
(标准下拉菜单)会导致问题,即通过重置下拉菜单,即使实际值没有变化,也会导致“更改”事件。
小提琴: http://jsfiddle.net/nmeoosLk/7/
这可能是一个解决方案,但它是优雅? http://jsfiddle.net/8ozv4nr1/
有一些事情在这里涉及,它是有用的知道。
首先,.select2("val", xyz)
is equivalent to.val(xyz).trigger("change")
。为什么引发了change
事件的原因是出于两个原因
- 旧选择二的版本用于触发
change
事件,所以我们提供了一个简单的升级路径。 - 页面上的其他组件应该正在侦听
change
事件以了解<select>
的值何时发生更改,因此触发它是有意义的。
其次,如果触发change
事件,则Select2只能知道<select>
的基础值是否会发生变化。
因此,当您将这两个问题结合在一起时,它开始解释为什么Select2不像您在change
事件中设置新值时所期望的那样工作。
您可以通过使用select2:select
事件来确定一个新的选择时获得的,而不是change
事件周围的环状change
事件。
https://jsfiddle.net/nmeoosLk/8/
这是锁定你到使用特定选择二的事件,但它是你最好的选择,如果你不想总是检查值变化。如果数值没有改变,我个人建议不要触发change
事件,因为少量代码将更好地帮助其他组件理解页面上发生的事情。
当您使用Select2 v4时,这里是一个通用代码片段,用于制作级联/依赖下拉列表。依赖关系可以被链接。
使用此模块,选择2列表框的选项将是由ajax根据另一个select2列表框的选择加载/刷新。
https://gist.github.com/ajaxray/187e7c9a00666a7ffff52a8a69b8bf31
例如 - 亲SELECT2列表框的
new Select2Cascade($('#country'), $('#province'), 'path/to/geocode', {type:"province", parent_id: ''});
new Select2Cascade($('#province'), $('#district'), 'path/to/geocode', {type:"district", parent_id: ''});
选定值将AJAX调用前被设置为数据对象的parent_id
。
感谢downvote ?! – 2015-04-03 08:46:37