是否有设计模式来管理＆＃34;级联选择＆＃34;容易？

Question

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

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

我需要实现的结构如下：

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

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

正如您所看到的，问题是视图的某些部分始终被隐藏/删除，最重要的是我需要在页面的生命周期中存储更改。它并不像模型那么简单，因为我不使用只是多重选择来处理所有事情......

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

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模式的问题。

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

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

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