是否有一种设计模式可以轻松管理“级联选择”？答案

【问题标题】：Is there a design pattern to manage "cascading choices" easily?是否有一种设计模式可以轻松管理“级联选择”？
【发布时间】：2013-05-18 19:31:06
【问题描述】：

我正在用 HTML 和 javascript 为一些浏览器应用程序制作 GUI。

目前，我面临着实现一个页面的挑战，该页面需要进行三级深度“级联选择”。我只是想知道是否有我可以坚持的设计模式，以使我的代码更易于管理，因为这不是一个非常罕见的问题。

我需要实现的结构如下：

{ A => { B => [C, C, ...] }

我会大致使用以下 GUI 布局（使用 Balsamiq 制作）：

问题是，如您所见，视图的某些部分一直被隐藏/删除，最重要的是，我需要在页面的生命周期内存储更改。它不像样机那么简单，因为我不使用只是多选来处理所有事情......

您通常如何解决此类问题？

【问题讨论】：

标签： javascript design-patterns hierarchy cascadingdropdown

【解决方案1】：

只需将每个列表放入一个 json 容器中
然后在该列表上放置一个点击监听器并将特定的 json 项添加到下一个列表中

//// PSEUDOCODE ////
var json{
  "a": {
    "a1": {
       "b1": "item",
       "b2": "item",
       "b4": "item"
    },
    "a2": {
     //stuff
    }
   },
   "b":{
     "b1": "items"
      //etc
   }
  }


select(){
 var item = clickedItem.id;
 case: a
   putintoB(json.item)
 case: b
   putintoC(json.item)
}

【讨论】：

这显然是最基本的，但这对我没有多大帮助......
尝试将这两个“教程”混为一谈...希望它有效stackoverflow.com/questions/1650090/…stackoverflow.com/questions/5940513/…
感谢您的努力，但我的问题远不止于此，我已经知道 JSON 是如何工作的，而且我对 javascript 非常熟悉。
我没有被卡住，我只是想就如何开始这个问题寻求建议，更具体地说，是否存在良好的设计模式。使用 javascript，您通常必须小心不要导致内存泄漏。

【解决方案2】：

这不会自动化很多事情，但似乎是Observer 模式的问题。

基本上，您将有一个观察者观察第一次选择的动作，而不是另一个观察第二次选择的动作......

当通知一个观察者时，它将采取行动，例如显示另一个选择。

这只是一个原始的想法，如果没有关于你想要做什么的更多细节，很难给你一个更详细的建议。

【讨论】：

这是我已经决定的，但我希望有更高级的东西。还是谢谢！