This is the array-based program only for logic development and how to bind array in dropdown list and Listbox will be managed by this program code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function showstate(a)
{
ddlstate= document.getElementById("state");
state1 = ["MP","UP","AP","HP"];
state2= ["NYC","SD","SC","SJ"];
state3= ["MB","SD","AUS1","AUS2"];
ddlstate.innerHTML = '';
if(a=="INDIA")
{
for(i=0;i<state1.length;i++)
{
item = state1[i];
ddlstate.innerHTML+="<option value=\"" + item + "\">" + item + "</option>";
}
}
else if(a=="USA")
{
for(i=0;i<state2.length;i++)
{
item = state2[i];
ddlstate.innerHTML+="<option value=\"" + item + "\">" + item + "</option>";
}
}
else if(a=="AUS")
{
for(i=0;i<state3.length;i++)
{
item = state3[i];
ddlstate.innerHTML+="<option value=\"" + item + "\">" + item + "</option>";
}
}
}
function showcity(a)
{
ddlcity= document.getElementById("city");
mpcity = ["INDORE","BHOPAL"];
upcity = ["LUCKNOW","NOIDA"];
apcity = ["Vijaywad","Tirupati"];
ddlcity.innerHTML = '';
if(a=="MP")
{
for(i=0;i<mpcity.length;i++)
{
item = mpcity[i];
ddlcity.innerHTML+="<option value=\"" + item + "\">" + item + "</option>";
}
}
else if(a=="UP")
{
for(i=0;i<upcity.length;i++)
{
item = upcity[i];
ddlcity.innerHTML+="<option value=\"" + item + "\">" + item + "</option>";
}
}
else if(a=="AP")
{
for(i=0;i<apcity.length;i++)
{
item = apcity[i];
ddlcity.innerHTML+="<option value=\"" + item + "\">" + item + "</option>";
}
}
}
</script>
</head>
<body>
<select id="country" onchange="showstate(this.value)">
<option value="">Select Country</option>
<option value="INDIA">INDIA</option>
<option value="USA">USA</option>
<option value="AUS">AUS</option>
</select>
<br>
<br>
<select id="state" onchange="showcity(this.value)">
<option value="">Select State</option>
</select>
<br>
<br>
<select id="city">
<option value="">Select City</option>
</select>
</body>
</html>
POST Answer of Questions and ASK to Doubt