类似 Ebay 的类别选择菜单 [关闭]

Question

我正在寻找一些示例代码（如果有的话）来处理下面的场景。

当您添加新项目时，我想制作一些级联（过滤）选定框，例如 ebay.com 使用。

我遇到了困难，因为

1. 可以有许多父子关系。可以存在具有四个或更多子类别的类别。
2. 我不确定当有人单击父类别时是否应该通过 jquery 动态添加选择框，或者在页面上有许多隐藏的选择框并根据需要隐藏/显示。
3. 我确定我可以查到这个，但我还不确定如何使用通过 javascript 在后面的代码中动态添加的表单元素。

有人知道eBay是怎么做到的吗？

数据会是这样的：

硬币美国 -> 美元 -> 摩根 -> 1894-98

或

邮票 -> 美国 -> 封面 -> FDC -> 1931-1940

数据将存储在一个sql表中，结构如下：

标识 |类别文字 |父母身份

在树中选择的每个级别都会在其右侧生成一个新的选择框，其中包含可用的子值。

Answer 1

我确定以前有人问过这个问题，但是这是您问题的 Jquery 部分的代码。

 var numbers = [1, 2, 3, 4, 5];

for (i=0;i<numbers.length;i++){
   $('<option/>').val(numbers[i]).html(numbers[i]).appendTo('#items');
}

https://stackoverflow.com/a/3446086

下一部分是对象组合问题，只有深入了解您对父子关系的了解，才能真正回答该问题。 ebay 是如何做的可能对你没有帮助，他们可能有你没有的需求。

Answer 2

看起来我正在发布我自己对第一个问题的答案。

以下是我将要做的大致大纲，我还没有编写代码，但我花了一晚上的时间思考解决方案，并相信它会奏效。

1. 去规范化数据。而不是拥有格式为

   的数据

   Id | CategoryText | ParentId

   我会把东西存储为

   Id | CategoryTextLevel1 | CategoryTextLevel2 等等。

   我做了一些研究，发现此时 ebay 的类别结构只下降了六个级别，我相信这对我也有用。

2. 在页面加载时，调用服务以获取第一级类别。

3. 将事件处理程序附加到每个选择框项，尚不确定我将如何执行此操作，但我认为我可能只能在 option.click() 上全局设置一个

4. 选择框项目将以<option id="x_y" value="y"的格式存储，其中x是类别（1-6）的级别，y是数据库中的类别ID

5. 选项点击

   1. 循环选择框 1-6，如果 id 大于我们单击的项目的索引，则删除

   2. 循环浏览页面上所有选定的选项。如果我们在叶节点，启用保存/继续按钮并显示所选类别链的摘要。

我还有一些东西要弄清楚，比如何时/如何在 jquery 中绑定所有事件，但这是我将用来编写页面代码的基本大纲。

此外，即使我发布了答案。如果其他人在他们的网站上有类似的代码，请随时发布链接，以便我可以与我的实现进行比较:-)

Answer 3

听起来你想要一个向下钻取菜单。这是一个很好的：http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

参见第二个和第三个示例。