Nested Select Boxes in Javascript

Question

mgt -2 Light Poster

15 Years Ago

I'm new to Javascript and found some code on the internet that's supposed to create some nested select boxes.

Here is the code:

<html> 
     <head>Some testing</head> 
     <script type="text/javascript" 
//src="http://trac.mochikit.com/browser/mochikit/trunk/packed/MochiKit/MochiKit.js?rev=1256&format=raw"></script> 
     <script type="text/javascript"> 
         /* <![CDATA[ */ 


 
 // An array of the currently visible selects 
 var level_selects = new Array(); 
  
 connect(window, 'onload', function () { 
     var sel = SELECT(); 
     level_selects.push(sel); 
     connect(sel, 'onchange', partial(update_levels_below, 0)); 
     appendChildNodes('theselects', sel); 
     get_level_data(0, []).addCallback(function (data) { 
         if (data) { 
             replaceChildNodes(sel, map(function (row) { 
                 return OPTION({"value": row[0]}, row[1]); 
             }, data)); 
             signal(sel, 'onchange'); 
         } 
     }); 
 }); 
  
 function get_level_data(level_no, path_above) { 
     /* you could call json here */ 
     var retval = null; 
     if (path_above.length) 
         var previous_level_id = path_above.pop(); 
     if (level_no == 0) { 
         retval = [['web','Web'],['db','Database'],['gui','GUI']]; 
     } else if (level_no == 1) { 
         if (previous_level_id == 'web') { 
             retval = [['web-python','Python'], ['web-ruby','Ruby'], ['web-php','PHP']]; 
         } else if (previous_level_id == 'db') { 
             retval = [['db-sqlite','SQLite'], ['db-mysql','MySQL']]; 
         } else if (previous_level_id == 'gui') { 
             retval = [['gui-python','Python'], ['gui-cpp','C++']]; 
         } else { 
             retval = null; 
         } 
     } else if (level_no == 2) { 
         if (previous_level_id == 'web-python') { 
             retval = [['tg','TurboGears'], ['django','Django']]; 
         } else if (previous_level_id == 'web-ruby') { 
             retval = [['rails','Ruby on Rails']]; 
         } else if (previous_level_id == 'web-php') { 
             retval = [['symphony', 'Symphony']]; 
         } else if (previous_level_id == 'gui-python') { 
             retval = [['wxpython', 'wxPython']]; 
         } else if (previous_level_id == 'gui-cpp') { 
             retval = [['wxwidgets', 'wxWidgets'], ['mfc', 'MFC']]; 
        } else { 
             retval = null; 
         } 
     } else { 
         retval = null; 
     } 
     return succeed(retval); 
 } 
  
 function update_levels_below(level_no) { 
     var path = map(itemgetter('value'), islice(level_selects, level_no+1)); 
     console.log('changed level ' + level_no, 'path:', path); 
     var d = get_level_data(level_no + 1, path); 
     d.addCallback(function (data) { 
         if (data) { 
             var sel = level_selects[level_no+1]; 
             if (sel == undefined) { 
                 /* the next level didn't exist, create it */ 
                 sel = SELECT(); 
                 level_selects.push(sel); 
                 connect(sel, 'onchange', partial(update_levels_below, level_no+1)); 
                 appendChildNodes('theselects', sel); 
             } 
             replaceChildNodes(sel, map(function (row) { 
                 return OPTION({"value": row[0]}, row[1]); 
             }, data)); 
             signal(sel, 'onchange'); 
         } else { 
             /* There is no next level */ 
             if (level_selects.length > level_no+1) { 
                 /* remove the select and all levels below */ 
                 forEach( 
                     islice(level_selects, level_no+1, level_selects.length), 
                     function (sel) { 
                         sel.parentNode.removeChild(sel); 
                     } 
                 ); 
                 level_selects.length = level_no+1; /* truncate the array */ 
             } 
         } 
     }); 
 } 
  
         /* ]]> */ 



     </script> 
     <style type="text/css"> 
         select { display: block; } 
     </style> 
     <body> 
         <div id="theselects"></div> 


     </body> 
</html>

Can someone please help me to get this to work (i.e., as is, it only creates 1 select box)?

And what does the comment, "/* you could call json here */", mean?

And what is the "packed mochkit in svn" (referred to on the web)?

javascript

3 Contributors
4 Replies
1K Views
6 Days Discussion Span
Latest Post 15 Years Ago Latest Post by digital-ether

All 4 Replies

digital-ether 399 Nearly a Posting Virtuoso

15 Years Ago

What do you mean by nested select boxes?

I don't think you can have nested select boxes in HTML. The only thing I can think of that comes close is the optgroup.

http://www.w3.org/TR/html401/interact/forms.html#h-17.6

or are you trying to create the look of nested select boxes with other HTML elements?

Could you post a reference to where the code was retrieved and any documentation? Its a bit hard to follow without it.

Edited 11 Years Ago by Nick Evan because: Fixed formatting

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

mgt -2 Light Poster · Answer 1 · 2008-06-18T00:54:04+00:00

URL for original code:

http://trac.mochikit.com/wiki/NestedSelectBoxes

By "nested select", I mean a select within a select. By choosing a value within the initial select box, the user will then be given additional choices to choose from.

The following URL also provides another version of this concept:

http://javascript.internet.com/forms/adding-options-2.html

From several nested selects, I want to be able to collect/gather a set of variables to use in a MySQL query....I also posted in the PHP section and was given a Javascript snippet using a DIV toggle method....

R0bb0b 344 Posting Shark · Answer 2 · 2008-06-18T02:21:59+00:00

Ya, tried it and got the same thing you got. Just cause it's posted somewhere certainly doesn't mean that it works. Usually whenever I see something like this it is a <ul> with nested urls that is then modified by js and css to create a menu, I've never heard of nested list boxes.

digital-ether 399 Nearly a Posting Virtuoso Team Colleague · Answer 3 · 2008-06-21T21:56:17+00:00

URL for original code:
http://trac.mochikit.com/wiki/NestedSelectBoxes

By "nested select", I mean a select within a select. By choosing a value within the initial select box, the user will then be given additional choices to choose from.

The following URL also provides another version of this concept:
http://javascript.internet.com/forms/adding-options-2.html
From several nested selects, I want to be able to collect/gather a set of variables to use in a MySQL query....I also posted in the PHP section and was given a Javascript snippet using a DIV toggle method....

I think what you want is how to populate a second select box based on the selection in the first select box and/or vise versa. (which isn't really nested select boxes)

Basically, the steps are simple:

You have a select box:

<select id="select1">
<option value="1">one</option>
<option value="2">two</option>
</select>

You have a second empty select box:

<select id="select2">
</select>

When a user chooses an option in the first select of id 'select1', you want the second select box to populate. So you have to attach an observer of the "onchange" (I believe its onchange) event of the first select box. This is the event that fires when a change in selection occurs.

// reference the first select box in DOM 
var select1 = document.getElementById('select1');

// observe the onchange event
select1.onchange = function() {
  // reference the selected option
  var selected_option = this.options[this.options.selectedIndex];
  // code to populate second select box goes here...
};

Now that you have a reference to the selected option when ever a new selection is made, you can populate the second select box based on the option selected.

The code to populate the second select box would depend on what you're trying to do. If you want to just insert the values from select1 to select2, then:

// reference the first select box in DOM 
var select1 = document.getElementById('select1');

// observe the onchange event
select1.onchange = function() {
  // reference the selected option
  var selected_option = this.options[this.options.selectedIndex];
  // reference the second select box
  var select2 = document.getElementById('select2');
  // clone the selected option in select1, and append it to select2
  select2.appendChild(selected_option.cloneNode(true));
  
};

Is that close to what you want?

Nested Select Boxes in Javascript

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers