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

Question

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

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

我需要实现的结构如下：

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

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

问题是，正如您所看到的，视图的某些部分始终被隐藏/删除，最重要的是我需要在页面的生命周期中存储更改。 它并不像实体模型一样简单，因为我不使用只 multiselects来打理一切...

你通常如何解决这类问题？

Answer 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)
}

Answer 2

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

基本上，你会有一个观察者观看第一个选择的动作，而另一个观看第二个等等...

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

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