[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

3 level combo box Dynamically

Posted on 2004-11-05
14
Medium Priority
?
3,941 Views
Last Modified: 2010-07-27
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
0
Comment
Question by:coreybryant
  • 7
  • 4
  • 3
14 Comments
 
LVL 12

Expert Comment

by:minichicken
ID: 12504167
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
 
LVL 29

Author Comment

by:coreybryant
ID: 12504250
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
 
LVL 12

Expert Comment

by:minichicken
ID: 12504477
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 13

Accepted Solution

by:
cLFlaVA earned 2000 total points
ID: 12504488
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
 
LVL 29

Author Comment

by:coreybryant
ID: 12504526
Hm, cLFlaVA  almost has it but when I select 3.1 then the second one still activates & instead of the third one

-Corey
0
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12504591
Slight change:

<select name="toplevel" onchange="fill(this, this.form.midlevel); fill(this.form.midlevel, this.form.lowlevel);">
0
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12504603
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
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12504606
Now it works for me...
I think :)
0
 
LVL 12

Expert Comment

by:minichicken
ID: 12504706
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
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12504723
minichicken-

if you can show me where in the question that functionality is required, i'd be interested.
0
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12504735
(no, it doesn't support that, obviously.  it supports the numerical hierarchy suggested).
0
 
LVL 29

Author Comment

by:coreybryant
ID: 12504737
Thanks!  that seemed to do the trick :)  Now we will see if the client likes it... LOL

-Corey
0
 
LVL 12

Expert Comment

by:minichicken
ID: 12504770
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
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12504805

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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question