User Name Password Register
DaniWeb IT Discussion Community
Home
Forums
Tutorials
Code Snippets
Blogs
Link Directory
All
•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 397,646 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,378 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Join our community!
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 1472 | Replies: 4
Reply
•
•
Join Date: Jun 2008
Posts: 11
Reputation: mgt is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
mgt mgt is offline Offline
Newbie Poster

Nested Select Boxes in Javascript

  #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:


Help with Code Tags
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 8:45 am. Reason: Keep It Organized - please use [code]tags
AddThis Social Bookmark Button
Reply With Quote  
•
•
Join Date: Sep 2005
Posts: 660
Reputation: digital-ether has a spectacular aura about digital-ether has a spectacular aura about 
Rep Power: 5
Solved Threads: 38
Moderator
digital-ether's Avatar
digital-ether digital-ether is offline Offline
Practically a Master Poster

Re: Nested Select Boxes in Javascript

  #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  
•
•
Join Date: Jun 2008
Posts: 11
Reputation: mgt is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
mgt mgt is offline Offline
Newbie Poster

Re: Nested Select Boxes in Javascript

  #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  
•
•
Join Date: Jun 2008
Location: Phoenix, AZ
Posts: 592
Reputation: R0bb0b is on a distinguished road 
Rep Power: 2
Solved Threads: 52
R0bb0b's Avatar
R0bb0b R0bb0b is offline Offline
Posting Pro

Re: Nested Select Boxes in Javascript

  #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  
•
•
Join Date: Sep 2005
Posts: 660
Reputation: digital-ether has a spectacular aura about digital-ether has a spectacular aura about 
Rep Power: 5
Solved Threads: 38
Moderator
digital-ether's Avatar
digital-ether digital-ether is offline Offline
Practically a Master Poster

Re: Nested Select Boxes in Javascript

  #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:

Help with Code Tags 
<select id="select1">
<option value="1">one</option>
<option value="2">two</option>
</select>

You have a second empty select box:

Help with Code Tags 
<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.

Help with Code Tags 
// 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:

Help with Code Tags 
// 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?
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  
Reply

•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Thread Tools Display Modes
Linear Mode Linear Mode

•
•
•
•
code injection epilepsy firefox griefers hackers html javascript news
Other Threads in the JavaScript / DHTML / AJAX Forum

Advertising Opportunities on DaniWeb
Contact Us - Newsletter Archive - Sitemap - Privacy Statement
All times are GMT -4. The time now is 11:10 pm.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC