Not the greatest solution, but I was bored so, here it is:
Code:
<html>
<head>
<script type="text/javascript">
// hook up your options
slaveArr1 = new Array("Slave option 1","Slave option 2","Slave option 3");
slaveArr2 = new Array("Another option 1","Another option 2","Another option 3");
// do the work
function updateSlave(val)
{
var arr;
if(val != "") // test empty value
{
// set values
if(val == "1")
arr = slaveArr1;
else
arr = slaveArr2;
// reset slave
resetSlave();
// populate options
populateSlave(arr);
}
}
// populates select field
function populateSlave(arr)
{
for(i=0;i<arr.length;i++)
{
o = document.createElement("option");
o.setAttribute("value",arr[i]);
o.appendChild( document.createTextNode( arr[i] ) );
document.getElementById("slave").appendChild(o);
}
}
// kill options in slave select field
function resetSlave()
{
while(document.getElementById("slave").childNodes.length > 0)
document.getElementById("slave").removeChild( document.getElementById("slave").lastChild );
}
</script>
</head>
<body>
<form method="GET" action="">
<p>Select 1:
<select name="master" onchange="updateSlave(this.value)">
<option value=""></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</p>
<p>Select 2:
<select name="slave" id="slave"></select>
</p>
</form>
</body>
</html>