Links

Lists

Latest Updates

Ruby On Rails List
Python list
Advanced Java
The JavaScript List
Apache Users
Full Disclosure
Linux Security

Search the archives!
Having a development problem? Ask eDevelopment.org forums!

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[Javascript] Making One Selection List Dictate Another's Contents

  • From: javascript@xxxxxxxxxx (Steve)
  • Subject: [Javascript] Making One Selection List Dictate Another's Contents
  • Date: Sun, 14 Apr 2002 14:45:29 -0500
Try this out.  It is not perfect.  You will have to
supply more of the client-side interaction code to make
it complete but it does work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd";>
<html>
<head>
<!--Written by Stephan Starr extstarrfam at
cox-internet.com-->
<!--Alter according to your needs-->
<title>Parent List to Child List Display
Options</title>
<script language="javascript 1.2"
type="text/javascript">
<!--

function process(n) {
 if(n==0) alert("no choice made");
 if(n==1) choiceOne();
 if(n==2) choiceTwo();
 if(n==3) choiceThree();
}

function choiceOne( ) {
 alert("Rocks");
 parentSelection( );
 this.document.write('<form name="choices"><select
name="child">');
 this.document.write('<option value="0" selected>Step 2
Choices');
 this.document.write('<option value="1">Limestone');
 this.document.write ('<option value="2">Granite');
 this.document.write('<option value="3">Sandstone');
 this.document.writeln('</select>');

}

function choiceTwo( ) {
 alert("Woods");
 parentSelection( );
 document.write('<form name="choices"><select
name="child">');
 this.document.write('<option value="0" selected>Step 2
Choices');
 this.document.write('<option value="1">Oak');
 this.document.write('<option value="2">Walnut');
 this.document.write('<option value="3">Ash');
 this.document.write('</select>');
}

function choiceThree( ) {
 alert("Waters");
 parentSelection( );
 this.document.write('<form name="choices"><select
name="child">');
 this.document.write('<option value="0" selected>Step 2
Choices');
 this.document.write('<option value="1">Fresh Water');
 this.document.write('<option value="2">Salt Water');
 this.document.write('<option value="3">Hard Water');
 this.document.write('</select>');
}

function parentSelection( ) {
 this.document.write('<form name="choices"><select
name="parent">');
 this.document.write('<option value="0">Step 1
Choices');
 this.document.write('<option value="1">Rocks');
 this.document.write('<option value="1">Woods');
 this.document.write('<option value="1">Waters');
 this.document.write('</select><br><br></form>')
}
//-->
</script>
</head>
<body>
<form name="choices">

<select name="parent" onClick="process(value)">
<option value="0" selected>Step 1 Choices</option>
<option value="1">Rocks</option>
<option value="2">Woods</option>
<option value="3">Waters<option>
</select>

<!--The other selection and it's options are written
using JavaScript.-->
</form>
</body>
</html>