I want three select fields where by each field is dependant on the other, what i mean is the first select field shows the values in the second while the second show the values in the the third field. Please can anyone help me our. this is a sample where by we have only two field but i need another field which take it value from the second.
Code:
<html>
<head>
<script type="text/javascript">
function popSecond()
{
var i,secBox,second,objvalue,thirdBox,third;
var obj = document.all.first;
objvalue = obj.options[obj.selectedIndex].value;
if(objvalue)
{
if(objvalue == "1")
secBox = "District,Metropolitan,Municipal";
if(objvalue == "2")
secBox = "Something,Else,In,Here";
if(objvalue == "3")
secBox = "This,Is,The,Third,Box";
secBox = secBox.split(",");
second = '<select name="second">';
for(var i=0;i<secBox.length;i++)
second += "<option>" + secBox[i] + "</option>"
second += "</select>";
document.getElementById("second").innerHTML = second;
}
}
</script>
</head>
<body>
<select name="first" onChange="popSecond()">
<option value="">Select one option</option>
<option value="1">Ashanti</option>
<option value="2">Brong Ahafo</option>
<option value="3">Central</option>
<option value="4">Eastern</option>
<option value="5">Greater Accra</option>
<option value="6">Central</option>
<option value="7">Northern</option>
<option value="8">Upper East</option>
<option value="9">Upper West</option>
<option value="10">Volta</option>
<option value="3">Western</option>
</select>
<div id="second">
</div>
<div id="trd">
</div>
</body>
</html>
Comment