3依赖Select2导致无限循环

Question

使用select2样式3依赖下拉菜单导致我的项目很多麻烦。

用例：有3个下拉菜单：A，B和C.C可以单独选择，A必须有非默认值B，反之亦然。 在没有select2的情况下执行此操作很容易，但使用.select2("val"而不是简单的.val(（标准下拉菜单）会导致问题，即通过重置下拉菜单，即使实际值没有变化，也会导致“更改”事件。

小提琴： http://jsfiddle.net/nmeoosLk/7/

这可能是一个解决方案，但它是优雅？ http://jsfiddle.net/8ozv4nr1/

Answer 1

有一些事情在这里涉及，它是有用的知道。

首先，.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事件，因为少量代码将更好地帮助其他组件理解页面上发生的事情。

Answer 2

当您使用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。