[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

3 level combo box Dynamically

Posted on 2004-11-24
5
Medium Priority
?
2,057 Views
Last Modified: 2011-08-18
Ref: http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21195901.html

Seems to work fine with only numbers.  Now I need one with the letters :( - anyone know what I need to change on this one

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

Thanks!

-Corey
0
Comment
Question by:coreybryant
  • 3
  • 2
5 Comments
 
LVL 25

Expert Comment

by:archrajan
ID: 12665774
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
function myfunc()
{
var a = document.myform
var b = a.mysel1.selectedIndex
if(a.mysel1.options[b].value == "1")
{
var opt = new Option("1.1","1.1","1.1")
var opt1 = new Option("1.2","1.2","1.2")
var opt2 = new Option("1.3","1.3","1.3")

a.mysel2.options[0] = opt;
a.mysel2.options[1] = opt1;
a.mysel2.options[2] = opt2;
}
if(a.mysel1.options[b].value == "2")
{
var opt = new Option("2.1","2.1","2.1")
var opt1 = new Option("2.2","2.2","2.2")
var opt2 = new Option("2.3","2.3","2.3")

a.mysel2.options[0] = opt;
a.mysel2.options[1] = opt1;
a.mysel2.options[2] = opt2;
}
if(a.mysel1.options[b].value == "3")
{
var opt = new Option("3.1","3.1","3.1")
var opt1 = new Option("3.2","3.2","3.2")
var opt2 = new Option("3.3","3.3","3.3")

a.mysel2.options[0] = opt;
a.mysel2.options[1] = opt1;
a.mysel2.options[2] = opt2;
}

}
</script>
</HEAD>

<BODY>
<form name = "myform">
<select name = "mysel1" onchange = "myfunc();">
<option value = ".">select here </option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
</select>
<select name = "mysel2"></select>
<select name = "mysel3"></select>
</form>

</BODY>
</HTML>

0
 
LVL 29

Author Comment

by:coreybryant
ID: 12665838
Thanks - that looks close but I added
<select name = "mysel2">test1</select>
<select name = "mysel3">test2</select>
because the last drop down seems to be empty?

-Corey
0
 
LVL 25

Accepted Solution

by:
archrajan earned 2000 total points
ID: 12665860
U have to add similar way for 2.1, 2.2, 2.3 and same for 3.1,3.2,3.3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
function myfunc()
{
var a = document.myform
var b = a.mysel1.selectedIndex
if(a.mysel1.options[b].value == "1")
{
var opt = new Option("1.1","1.1","1.1")
var opt1 = new Option("1.2","1.2","1.2")
var opt2 = new Option("1.3","1.3","1.3")

a.mysel2.options[1] = opt;
a.mysel2.options[2] = opt1;
a.mysel2.options[3] = opt2;
}
if(a.mysel1.options[b].value == "2")
{
var opt = new Option("2.1","2.1","2.1")
var opt1 = new Option("2.2","2.2","2.2")
var opt2 = new Option("2.3","2.3","2.3")

a.mysel2.options[1] = opt;
a.mysel2.options[2] = opt1;
a.mysel2.options[3] = opt2;
}
if(a.mysel1.options[b].value == "3")
{
var opt = new Option("3.1","3.1","3.1")
var opt1 = new Option("3.2","3.2","3.2")
var opt2 = new Option("3.3","3.3","3.3")

a.mysel2.options[1] = opt;
a.mysel2.options[2] = opt1;
a.mysel2.options[3] = opt2;
}
if(a.mysel1.options[b].value == ".")
{
a.mysel2.length = null;
}

}
function myfunc2()
{
var a = document.myform
var b = a.mysel2.selectedIndex
if(a.mysel2.options[b].value == "1.1")
{
var opt = new Option("1.1.1","1.1.1","1.1.1")
var opt1 = new Option("1.1.2","1.1.2","1.1.2")
var opt2 = new Option("1.1.3","1.1.3","1.1.3")

a.mysel3.options[1] = opt;
a.mysel3.options[2] = opt1;
a.mysel3.options[3] = opt2;
}
if(a.mysel2.options[b].value == "1.2")
{
var opt = new Option("1.2.1","1.2.1","1.2.1")
var opt1 = new Option("1.2.2","1.2.2","1.2.2")
var opt2 = new Option("1.2.3","1.2.3","1.2.3")

a.mysel3.options[1] = opt;
a.mysel3.options[2] = opt1;
a.mysel3.options[3] = opt2;
}
if(a.mysel2.options[b].value == "1.3")
{
var opt = new Option("1.3.1","1.3.1","1.3.1")
var opt1 = new Option("1.3.2","1.3.2","1.3.2")
var opt2 = new Option("1.3.3","1.3.3","1.3.3")

a.mysel3.options[1] = opt;
a.mysel3.options[2] = opt1;
a.mysel3.options[3] = opt2;
if(a.mysel1.options[b].value == ".")
{
a.mysel2.length = null;
}
}
}

</script>
</HEAD>

<BODY>
<form name = "myform">
<select name = "mysel1" onchange = "myfunc();">
<option value = ".">select here </option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
</select>
<select name = "mysel2" onchange = "myfunc2();">
<option value = ".">Select here </option>
</select>
<select name = "mysel3">
<option value = ".">Select here </option>
</select>
</form>

</BODY>
</HTML>
0
 
LVL 29

Author Comment

by:coreybryant
ID: 12666001
Gotcha - sorry about that.  I think this should work

-Corey
0
 
LVL 25

Expert Comment

by:archrajan
ID: 12666158
Thanks a lot for the points
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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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

830 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