1

使用 select2 来设置 3 个依赖下拉菜单的样式会给我的项目带来很多麻烦。

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

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

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

4

2 回答 2

0

这里涉及到一些有用的信息。

首先，.select2("val", xyz) 等价于 .val(xyz).trigger("change")。change触发事件的原因有两个

  • 旧版本的 Select2 用于触发change事件，因此我们提供了一个易于升级的路径。
  • 页面上的其他组件应该监听change事件以了解值何时<select>发生变化，因此触发它是有意义的。

<select>其次，Select2 只有在触发change事件时才能知道基础值是否发生变化。

因此，当您将这两个问题结合在一起时，它开始解释为什么 Select2 在您在change事件中设置新值时不会像您预期的那样运行。

change您可以通过使用select2:select事件而不是事件来确定何时进行新选择来绕过循环change事件。

https://jsfiddle.net/nmeoosLk/8/

这会将您锁定为使用特定于 Select2 的事件，但如果您不想总是检查值是否更改，这是您的最佳选择。如果值没有改变，我个人建议不要触发change事件，因为少量的代码将更好地帮助其他组件了解页面上发生的事情。

于 2015-04-05T22:19:50.943 回答
0

当您使用 Select2 v4 时，这里是一个通用代码片段，用于制作级联/依赖下拉菜单。并且可以链接依赖项。

使用这个模块，一个 select2 列表框的选项将根据另一个 select2 列表框的选择由 ajax 加载/刷新。

https://gist.github.com/ajaxray/187e7c9a00666a7ffff52a8a69b8bf31

例如 -

new Select2Cascade($('#country'), $('#province'), 'path/to/geocode', {type:"province", parent_id: ''});
new Select2Cascade($('#province'), $('#district'), 'path/to/geocode', {type:"district", parent_id: ''});

父 select2 列表框的选定值将parent_id在 ajax 调用之前设置为数据对象的值。

于 2016-08-02T10:41:16.800 回答