如何使用ajax/jQuery实现动态分类导航/分层下拉列表？

Question

我想为我的用户提供一种通过连续向下钻取ono下拉列表来导航分类法的方法。

一个简单的例子就是ebay的分类。假设你选择了“服装”类别，下一个下拉列表将显示服装下的所有子类别，如“短裤”、“裤子”、“外套”等。

我查看了jQuery插件mcDropdown。界面看起来真的很不错。但是，它似乎需要一次性将整个分类法传递给插件。我看过的其他插件也有这个限制。

我需要一些东西，检索和显示动态数据。因此，在用户选择“服装”之后，UI将该选择发送回服务器，然后服务器发送回“服装”的子类别列表，依此类推。

有没有能做到这一点的jQuery插件？或者在普通的jQuery中实现它需要什么？

我更喜欢jQuery，但是其他框架也可以。

Answer 1

我曾经wrote a plugin过一次，这可能是你正在寻找的；如果不是，至少它应该给你一个开始编码的好地方(希望是:)

Answer 2

我不知道有什么插件可以做到这一点，所以下面是这个过程的一个细目。

应该不会花很长时间来实现..(我不会尝试它，因为它依赖于您的服务器端技术和ajax调用返回的html/xml/json之间的首选项。)

1. jquery ajax调用使用jquery带来第一级数据
2. 创建下拉列表，并将获取的数据添加到其中
3. 列表项在新的下拉列表上使用jquery .data()方法自动递增计数器(当您更改下拉列表中不是最后一个下拉列表中的内容时，将用于删除所有后续实例)
4. 将处理程序绑定到新下拉列表的D9事件，该事件将重复整个过程，将参数传递给Ajax调用选择的id (应该创建逻辑一次，第一次手动调用它。)
5. 在同一处理程序中检查选择框的计数器是否不是最后一个，找到所有下拉列表，并在DOM中删除计数器大于this dropdown..
6. add的下拉列表。.

我希望这是有意义的..