coreybryant
asked on
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
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
ASKER
Almost but if 1.1 is selected then the second comb box would not be picked - it would go to the third one
-Corey
-Corey
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?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hm, cLFlaVA almost has it but when I select 3.1 then the second one still activates & instead of the third one
-Corey
-Corey
Slight change:
<select name="toplevel" onchange="fill(this, this.form.midlevel); fill(this.form.midlevel, this.form.lowlevel);">
<select name="toplevel" onchange="fill(this, this.form.midlevel); fill(this.form.midlevel, this.form.lowlevel);">
And this:
<body onload="fill(document.form s['f'].ele ments['top level'], document.forms['f'].elemen ts['midlev el']); fill(document.forms['f'].e lements['m idlevel'], document.forms['f'].elemen ts['lowlev el']);">
<body onload="fill(document.form
Now it works for me...
I think :)
I think :)
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 ??
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 ??
minichicken-
if you can show me where in the question that functionality is required, i'd be interested.
if you can show me where in the question that functionality is required, i'd be interested.
(no, it doesn't support that, obviously. it supports the numerical hierarchy suggested).
ASKER
Thanks! that seemed to do the trick :) Now we will see if the client likes it... LOL
-Corey
-Corey
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..
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..
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 :)
Are you looking for this:
<FORM name="isc">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td nowrap height="11">
<select name="example" size="1" onChange="redirect(this.op
<option selected>---Select1-------
<option>Webmaster Sites</option>
<option>News Sites</option>
</select>
<select name="stage2" size="1" onChange="redirect1(this.o
<option value=" " selected> </option>
<option value=" " selected>---Select2-------
<option value=" " selected>---Select2-------
</select>
<select name="stage3" size="1" onChange="redirect2(this.o
<option value=" " selected> </option>
<option value=" " selected>---Select3-------
<option value=" " selected>---Select3-------
</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.exampl
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
temp.options[m]=null
for (i=0;i<group[x].length;i++
temp.options[i]=new Option(group[x][i].text,gr
}
temp.options[0].selected=t
redirect1(0)
}
var secondGroups=document.isc.
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",
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;
temp1.options[m]=null
for (i=0;i<secondGroup[documen
temp1.options[i]=new Option(secondGroup[documen
}
temp1.options[0].selected=
}
function redirect2(z){
window.location=temp1[z].v
}
//-->
</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