NestedSelectBoxes: test.html

File test.html, 3.7 kB (added by arnarbi@gmail.com, 1 year ago)

An example of nested select boxes.

Line 
1 <html>
2     <head>Some testing</head>
3     <script type="text/javascript" src="http://trac.mochikit.com/browser/mochikit/trunk/packed/MochiKit/MochiKit.js?rev=1256&format=raw"></script>
4     <script type="text/javascript">
5         /* <![CDATA[ */
6
7 // An array of the currently visible selects
8 var level_selects = new Array();
9
10 connect(window, 'onload', function () {
11     var sel = SELECT();
12     level_selects.push(sel);
13     connect(sel, 'onchange', partial(update_levels_below, 0));
14     appendChildNodes('theselects', sel);
15     get_level_data(0, []).addCallback(function (data) {
16         if (data) {
17             replaceChildNodes(sel, map(function (row) {
18                 return OPTION({"value": row[0]}, row[1]);
19             }, data));
20             signal(sel, 'onchange');
21         }
22     });
23 });
24
25 function get_level_data(level_no, path_above) {
26     /* you could call json here */
27     var retval = null;
28     if (path_above.length)
29         var previous_level_id = path_above.pop();
30     if (level_no == 0) {
31         retval = [['web','Web'],['db','Database'],['gui','GUI']];
32     } else if (level_no == 1) {
33         if (previous_level_id == 'web') {
34             retval = [['web-python','Python'], ['web-ruby','Ruby'], ['web-php','PHP']];
35         } else if (previous_level_id == 'db') {
36             retval = [['db-sqlite','SQLite'], ['db-mysql','MySQL']];
37         } else if (previous_level_id == 'gui') {
38             retval = [['gui-python','Python'], ['gui-cpp','C++']];
39         } else {
40             retval = null;
41         }
42     } else if (level_no == 2) {
43         if (previous_level_id == 'web-python') {
44             retval = [['tg','TurboGears'], ['django','Django']];
45         } else if (previous_level_id == 'web-ruby') {
46             retval = [['rails','Ruby on Rails']];
47         } else if (previous_level_id == 'web-php') {
48             retval = [['symphony', 'Symphony']];
49         } else if (previous_level_id == 'gui-python') {
50             retval = [['wxpython', 'wxPython']];
51         } else if (previous_level_id == 'gui-cpp') {
52             retval = [['wxwidgets', 'wxWidgets'], ['mfc', 'MFC']];
53         } else {
54             retval = null;
55         }
56     } else {
57         retval = null;
58     }
59     return succeed(retval);
60 }
61
62 function update_levels_below(level_no) {
63     var path = map(itemgetter('value'), islice(level_selects, level_no+1));
64     console.log('changed level ' + level_no, 'path:', path);
65     var d = get_level_data(level_no + 1, path);
66     d.addCallback(function (data) {
67         if (data) {
68             var sel = level_selects[level_no+1];
69             if (sel == undefined) {
70                 /* the next level didn't exist, create it */
71                 sel = SELECT();
72                 level_selects.push(sel);
73                 connect(sel, 'onchange', partial(update_levels_below, level_no+1));
74                 appendChildNodes('theselects', sel);
75             }
76             replaceChildNodes(sel, map(function (row) {
77                 return OPTION({"value": row[0]}, row[1]);
78             }, data));
79             signal(sel, 'onchange');
80         } else {
81             /* There is no next level */
82             if (level_selects.length > level_no+1) {
83                 /* remove the select and all levels below */
84                 forEach(
85                     islice(level_selects, level_no+1, level_selects.length),
86                     function (sel) {
87                         sel.parentNode.removeChild(sel);
88                     }
89                 );
90                 level_selects.length = level_no+1; /* truncate the array */
91             }
92         }
93     });
94 }
95
96         /* ]]> */
97     </script>
98     <style type="text/css">
99         select { display: block; }
100     </style>
101     <body>
102         <div id="theselects"></div>
103     </body>
104 </html>