Dependent Drop Down Lists

**hefterr** · 01-07-2010 09:01 AM

Hi,
I'm new to Javascript. I have a simple (I hope) request:

I have 2 simple drop down lists in a form where the first one (say foods) displays :
-Meat
-fruit
-vegatables

Based on what is selected (say fruit)
The second dropdown would display :
-apples
-pears
-bananas

I only have 5 categories and 6 for each subcategory. No DB access is needed for this.

I am working in Coldfusion 8 and it does provide a convoluted AJAX solution which generates a ton of code.

Any simpler Javascript would be appreciated.

Thanks,
hefterr

**Fang** · 01-07-2010 09:34 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>select change 2nd select</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
var varieties=[
["varieties","granny smith","golden delicious","jonathan"],
["varieties","anjou","bartlett","conference"],
["varieties","valencia","pineapple","pera"]
];

function Box2(idx) {
var f=document.myform;
f.box2.options.length=null;
for(var i=0; i<varieties[idx].length; i++) {
	f.box2.options[i]=new Option(varieties[idx][i], i); 
    }    
}

window.onload=function() {
var box1=document.myform.box1;
box1.onchange=function(){Box2(this.selectedIndex);};
// create 2nd select
try { // IE
  var sel=document.createElement("<select name=\"box2\"><\/select>");
  }
catch(e) {
  var sel=document.createElement("select");
  sel.name = "box2";
  }
document.myform.getElementsByTagName('fieldset')[0].insertBefore(sel, box1.nextSibling);
// fill 2nd select
Box2(0);
}
</script>

</head>
<body>
<form name="myform" method="post" action="http://www.mysite.com/mysite">
<fieldset><legend>fruit</legend>
<select name="box1">
    <option value="a">apple</option>
    <option value="b">pear</option>
    <option value="c">orange</option>
</select>
<button type="submit">submit</button>
</fieldset>
</form>
</body>
</html>

**hefterr** · 01-07-2010 10:24 AM

Hi Fang,
Thanks for the script.

Can you tell me where I could put HTML/CSS to position the 2nd box as it seems to be created in the script itself. Let's say you want to put the 2nd Select box blelow the first with a line of spaces between? If you give an example I'll get the idea.

Thanks very much for your time and expertise.
hefterr

**Fang** · 01-07-2010 10:27 AM

Code:

<style type="text/css">
select {display:block; margin:1em 0;}
</style>

**hefterr** · 01-07-2010 12:09 PM

Fang,
One (ok 2) more question (promise) :

1) If I wanted to syle one box differently than another how do I identify the 2nd box only(class, ID, Name) as they are both type "Select".

2) I notice that if I take the Fieldset tags out, I don't get the 2nd list at all?

Thanks again,
hefterr

**Fang** · 01-07-2010 12:13 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>select change 2nd select</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
var varieties=[
["varieties","granny smith","golden delicious","jonathan"],
["varieties","anjou","bartlett","conference"],
["varieties","valencia","pineapple","pera"]
];

function Box2(idx) {
var f=document.myform;
f.box2.options.length=null;
for(var i=0; i<varieties[idx].length; i++) {
	f.box2.options[i]=new Option(varieties[idx][i], i); 
    }    
}

window.onload=function() {
var box1=document.myform.box1;
box1.onchange=function(){Box2(this.selectedIndex);};
// create 2nd select
try { // IE
  var sel=document.createElement("<select name=\"box2\"><\/select>");
  }
catch(e) {
  var sel=document.createElement("select");
  sel.name = "box2";
  sel.id = "box2";
  }
document.myform.getElementsByTagName('fieldset')[0].insertBefore(sel, box1.nextSibling);
// fill 2nd select
Box2(0);
}
</script>
<style type="text/css">
select {display:block; margin:1em 0;}
#box2 {color:red;}
</style>
</head>
<body>
<form name="myform" method="post" action="http://www.mysite.com/mysite">
<fieldset><legend>fruit</legend>
<select name="box1">
    <option value="a">apple</option>
    <option value="b">pear</option>
    <option value="c">orange</option>
</select>
<button type="submit">submit</button>
</fieldset>
</form>
</body>
</html>

**hefterr** · 01-07-2010 12:21 PM

I think you may have missed my question on Fieldset?

**Fang** · 01-07-2010 12:39 PM

For valid html, form elements should be enclosed in a block element. In this case a fieldset is used. A div could also be used.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>select change 2nd select</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
var varieties=[
["varieties","granny smith","golden delicious","jonathan"],
["varieties","anjou","bartlett","conference"],
["varieties","valencia","pineapple","pera"]
];

function Box2(idx) {
var f=document.myform;
f.box2.options.length=null;
for(var i=0; i<varieties[idx].length; i++) {
	f.box2.options[i]=new Option(varieties[idx][i], i); 
    }    
}

window.onload=function() {
var box1=document.myform.box1;
box1.onchange=function(){Box2(this.selectedIndex);};
// create 2nd select
try { // IE
  var sel=document.createElement("<select name=\"box2\"><\/select>");
  }
catch(e) {
  var sel=document.createElement("select");
  sel.name = "box2";
  sel.id = "box2";
  }
document.myform.getElementsByTagName('div')[0].insertBefore(sel, box1.nextSibling);
// fill 2nd select
Box2(0);
}
</script>
<style type="text/css">
select {display:block; margin:1em 0;}
#box2 {color:red;}
</style>
</head>
<body>
<form name="myform" method="post" action="http://www.mysite.com/mysite">
<div>
<select name="box1">
    <option value="a">apple</option>
    <option value="b">pear</option>
    <option value="c">orange</option>
</select>
<button type="submit">submit</button>
</div>
</form>
</body>
</html>

Thread: Dependent Drop Down Lists

Thread Tools

Display

Dependent Drop Down Lists

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions