943,580 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Nested Select Boxes in Javascript
Ad:
Permalink
Jun 14th, 2008
0

Nested Select Boxes in Javascript

Expand 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 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
mgt
Reputation Points: 8
Solved Threads: 0
Light Poster
mgt is offline Offline
28 posts
since Jun 2008
Permalink
Jun 17th, 2008
0

Re: Nested Select Boxes in Javascript

Click to Expand / Collapse  Quote originally posted by mgt ...
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.
Moderator
Reputation Points: 457
Solved Threads: 101
Nearly a Posting Virtuoso
digital-ether is offline Offline
1,250 posts
since Sep 2005
Permalink
Jun 17th, 2008
0

Re: Nested Select Boxes in Javascript

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....
mgt
Reputation Points: 8
Solved Threads: 0
Light Poster
mgt is offline Offline
28 posts
since Jun 2008
Permalink
Jun 17th, 2008
0

Re: Nested Select Boxes in Javascript

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.
Reputation Points: 358
Solved Threads: 89
Posting Shark
R0bb0b is offline Offline
986 posts
since Jun 2008
Permalink
Jun 21st, 2008
0

Re: Nested Select Boxes in Javascript

Click to Expand / Collapse  Quote originally posted by mgt ...
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?
Moderator
Reputation Points: 457
Solved Threads: 101
Nearly a Posting Virtuoso
digital-ether is offline Offline
1,250 posts
since Sep 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Help in AJAX!!!!!!!!!!
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Regular Expression Headache





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC