3 level combo box Dynamically

I need to make 3 level of Combo box

1st one there are three elements 1, 2, 3

If we select 1 then second combobox will enable and it should shows select choice 1.1, 1.2,1.3

If we select 2 then second combobox will enable and it should shows select choice 2.1, 2.2,2.3

If we select 3 then second combobox will enable and it should shows select choice 3.1, 3.2,3.3

If we select 1.1 then third combobox will enable and its should shows select choice 1.1.1, 1.1.2,1.1.3

If we select 1.2 then third combobox will enable and its should shows select choice 1.2.1, 1.2.2,1.2.3

If we select 1.3 then third combobox will enable and its should shows select choice 1.3.1, 1.3.2,1.3.3.

I can do this for two selects buit not three.  :-/

Thanks!

-Corey
LVL 29
coreybryantAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

minichickenCommented:
Hi

Are you looking for this:

<FORM name="isc">
<table border="0" cellspacing="0" cellpadding="0">
  <tr align="center">
    <td nowrap height="11"> &nbsp;

<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected>---Select1-------------</option>
<option>Webmaster Sites</option>
<option>News Sites</option>
</select>

<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select2--------------</option>
<option value=" " selected>---Select2--------------</option>
</select>

<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select3----------------</option>
<option value=" " selected>---Select3----------------</option>
</select>

<script>
<!--

/*
Triple Combo Script Credit
By Hamid Cheheltani/ JavaScript Kit (http://www.javascriptkit.com)
Visit http://javascriptkit.com for this and over 400+ other scripts
*/

var groups=document.isc.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("---Select2---"," ");

group[1][0]=new Option("Now Select This One"," ");
group[1][1]=new Option("JavaScript","47");
group[1][2]=new Option("DHTML","46");
group[1][3]=new Option("CGI","45");

group[2][0]=new Option("Now Select This One"," ");
group[2][1]=new Option("General News","115");
group[2][2]=new Option("Technology News","116");

var temp=document.isc.stage2


function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
redirect1(0)
}



var secondGroups=document.isc.stage2.options.length
var secondGroup=new Array(groups)
for (i=0; i<groups; i++)  {
secondGroup[i]=new Array(group[i].length)
for (j=0; j<group[i].length; j++)  {
secondGroup[i][j]=new Array()  }}

secondGroup[0][0][0]=new Option("---Select 3---"," ");
secondGroup[1][0][0]=new Option("---Select 3---"," ");
secondGroup[1][1][0]=new Option("Now Select This One"," ");
secondGroup[1][1][1]=new Option("JavaScript Kit","http://javascriptkit.com");
secondGroup[1][1][2]=new Option("JavaScript for the non programmer","http://webteacher.com/javascript/");
secondGroup[1][1][3]=new Option("Java-Scripts.net","http://java-scripts.net");

secondGroup[1][2][0]=new Option("Now Select This One"," ");
secondGroup[1][2][1]=new Option("Dynamic Drive","http://www.dynamicdrive.com");
secondGroup[1][2][2]=new Option("Beginner\'s Guide to DHTML","http://www.geocities.com/ResearchTriangle/Facility/4490/");
secondGroup[1][2][3]=new Option("Web Coder","http://webcoder.com/");

secondGroup[1][3][0]=new Option("Now Select This One"," ");
secondGroup[1][3][1]=new Option("CGI Resources","http://www.cgi-resources.com");
secondGroup[1][3][2]=new Option("Ada\'s Intro to CGI","http://adashimar.hypermart.net/");

secondGroup[2][0][0]=new Option("---Select 3---"," ");
secondGroup[2][1][0]=new Option("Now Select This One"," ");
secondGroup[2][1][1]=new Option("CNN","http://www.cnn.com");
secondGroup[2][1][2]=new Option("MSNBC","http://www.msnbc.com");
secondGroup[2][1][3]=new Option("ABC News","http://www.abcnews.com");

secondGroup[2][2][0]=new Option("Now Select A Page"," ");
secondGroup[2][2][1]=new Option("News.com","http://www.news.com");
secondGroup[2][2][2]=new Option("Wired","http://www.wired.com");

var temp1=document.isc.stage3
function redirect1(y){
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){
temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)
}
temp1.options[0].selected=true
}

function redirect2(z){
window.location=temp1[z].value
}

//-->
</script>

            </td>
  </tr>
</table>
</FORM>

<p><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

source: http://www.javascriptkit.com/script/script2/triplecombo.shtml
0
coreybryantAuthor Commented:
Almost but if 1.1 is selected then the second comb box would not be picked - it would go to the third one

-Corey
0
minichickenCommented:
hmm... what do you mean that >> if 1.1 was selected then the second comb box would not be "picked" - it would go to the third one?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

cLFlaVACommented:
Whoa!  Ton of code.  How about something like this?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>new document</title>

<script language="javascript" type="text/javascript">
<!--

function fill(i, o) {
    var n = i.options[i.selectedIndex].value;
      document.forms['f'].elements['lowlevel'].options.length = 0;
      o.options.length = 0;

      for (var i = 0; i < 3; i++) {
        o.options[i] = new Option(n + "." + (i + 1), n + "." + (i + 1))
      }
}

-->
</script>

<style type="text/css">

</style>

</head>

<body onload="fill(document.forms['f'].elements['toplevel'], document.forms['f'].elements['midlevel'])">

<form name="f">

<select name="toplevel" onchange="fill(this, this.form.midlevel);">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
</select>

<select name="midlevel" onchange="fill(this, this.form.lowlevel);">
</select>

<select name="lowlevel">
</select>

</form>

</body>

</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
coreybryantAuthor Commented:
Hm, cLFlaVA  almost has it but when I select 3.1 then the second one still activates & instead of the third one

-Corey
0
cLFlaVACommented:
Slight change:

<select name="toplevel" onchange="fill(this, this.form.midlevel); fill(this.form.midlevel, this.form.lowlevel);">
0
cLFlaVACommented:
And this:

<body onload="fill(document.forms['f'].elements['toplevel'], document.forms['f'].elements['midlevel']); fill(document.forms['f'].elements['midlevel'], document.forms['f'].elements['lowlevel']);">
0
cLFlaVACommented:
Now it works for me...
I think :)
0
minichickenCommented:
cLFlaVA

If I need to have the first box to be country and the second be city and the thrid be street.
How would you do that? Does your code support that? or does it just add numbers ??


0
cLFlaVACommented:
minichicken-

if you can show me where in the question that functionality is required, i'd be interested.
0
cLFlaVACommented:
(no, it doesn't support that, obviously.  it supports the numerical hierarchy suggested).
0
coreybryantAuthor Commented:
Thanks!  that seemed to do the trick :)  Now we will see if the client likes it... LOL

-Corey
0
minichickenCommented:
Oh ok.....

I thought coreybryant's question was just a simplified on and illustrated with numbers for easier understanding....
So I just thought using arrays was more appropriate....

anyways.... good job..
0
cLFlaVACommented:

Yeah, yours would have obviously been much more robust.  That's the thing - on here, you never know what the asker is really asking.  Is it an example?  Or is it exactly what he wants?  I guess I just took a completely literal understanding of the question, while you provided a what-if example.

thanks :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.