Nested Select Boxes in Javascript

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Jun 2008
Posts: 11
Reputation: mgt is an unknown quantity at this point 
Solved Threads: 0
mgt mgt is offline Offline
Newbie Poster

Nested Select Boxes in Javascript

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

Re: Nested Select Boxes in Javascript

 
0
  #2
Jun 17th, 2008
•
•
•
•
Originally Posted by mgt View Post
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)?

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.
www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 11
Reputation: mgt is an unknown quantity at this point 
Solved Threads: 0
mgt mgt is offline Offline
Newbie Poster

Re: Nested Select Boxes in Javascript

 
0
  #3
Jun 17th, 2008
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...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....
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 849
Reputation: R0bb0b is on a distinguished road 
Solved Threads: 67
R0bb0b's Avatar
R0bb0b R0bb0b is offline Offline
Practically a Posting Shark

Re: Nested Select Boxes in Javascript

 
0
  #4
Jun 17th, 2008
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2005
Posts: 1,085
Reputation: digital-ether is just really nice digital-ether is just really nice digital-ether is just really nice digital-ether is just really nice 
Solved Threads: 66
Moderator
digital-ether's Avatar
digital-ether digital-ether is offline Offline
Veteran Poster

Re: Nested Select Boxes in Javascript

 
0
  #5
Jun 21st, 2008
•
•
•
•
Originally Posted by mgt View Post
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...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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <select id="select1">
  2. <option value="1">one</option>
  3. <option value="2">two</option>
  4. </select>

You have a second empty select box:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <select id="select2">
  2. </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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. // reference the first select box in DOM 
  2. var select1 = document.getElementById('select1');
  3.  
  4. // observe the onchange event
  5. select1.onchange = function() {
  6.   // reference the selected option
  7.   var selected_option = this.options[this.options.selectedIndex];
  8.   // code to populate second select box goes here...
  9. };

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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. // reference the first select box in DOM 
  2. var select1 = document.getElementById('select1');
  3.  
  4. // observe the onchange event
  5. select1.onchange = function() {
  6.   // reference the selected option
  7.   var selected_option = this.options[this.options.selectedIndex];
  8.   // reference the second select box
  9.   var select2 = document.getElementById('select2');
  10.   // clone the selected option in select1, and append it to select2
  11.   select2.appendChild(selected_option.cloneNode(true));
  12.  
  13. };

Is that close to what you want?
www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the JavaScript / DHTML / AJAX Forum


Views: 3441 | Replies: 4
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
acid2 ajax ajaxcode ajaxhelp animate array automatically autoplay beta boarder box bug button calendar captcha card cart codes column cookies createrange() css cursor date debugger decimal design developer dom download dropdown element enter error events firefox firehose flash focus form frameworks getselection google gwt html htmlform iframe image() index java javascript javascripts jawascriptruntimeerror jquery jsp listbox maps marquee masterpage menu microsoft mimic mp3 mp4 offline onmouseover parameters php player post problem programming progressbar prototype rating redirect regex safari scale scriptlets search select size sources sql starrating text textarea toggle twitter validation variables w3c web website window windowofwords windowsxp xml xspf
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC