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

Sun Apr 14 14:45:29 CDT 2002

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>


<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>