<html>
<head><title>dynamic drop down list</title>
<script>
function dropdownlist()
{
var state=document.getElementById('input').value;
if(state==="AP")
{
var array=["Tirupati","vizag","kadapa","Amaravathi","kurnool"];
}
else if(state==="KA")
{
var array=["Bangalore","Mysore","Mangalore","Hubli"];
}
else if(state==="TN")
{
var array=["vellore","chennai","Coimbatore","Madurai"];
}
else if(state==="TG")
{
var array=["Hyderabad","Warangal","Nizamabad","Karimnagar"];
}
else
{
var array=[];
}
var string='';
for(i=0;i<array.length;i++)
{
string=string+"<option>"+array[i]+"</option>";
}
string="<select name='loc'>"+string+"</select>";
document.getElementById('output').innerHTML=string;
}
</script></head>
<body>
<form name="collectdetails">
<p>Name:<input type="text" name="uname" id="uname" /></p>
<p>Gender:<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female</p>
<p>Address:<textarea rows="4" cols="10" placeholder="please enter the proper address"></textarea></p>
<p>
State:
<select id="input" onChange='dropdownlist()'>
<option>select</option>
<option>AP</option>
<option>TG</option>
<option>TN</option>
<option>KA</option>
</select>
</p>
City:
<div id="output">
<select>
<option>select</option>
</select>
</div></form></body>
</html>
Output:
No comments:
Post a Comment