<!DOCTYPE html>
<html>
<body onload="setCountry()">
<center>
Country<select id="country" onchange="setCity()">
<option value="" selected="selected">-- Select Country --</option>
</select>
Capital<select id="city" onchange="getcountry()">
<option value="" selected="selected">-- Select City --</option>
</select>
</center>
<p id="demo"></p>
<script>
var cityAll="";
var CountryAll="";
function setCountry()
{
var str1=" INDIA:MUMBAI, INDIA:PUNE, PAKISTAN:ISLAMABAD, PAKISTAN:KARACHI, PAKISTAN:LAHORE, USA:CALIFORNIA, USA:TEXAS, USA:SAN DIEGO, INDIA:DELHI, ";
var str1=str1.trim();
//var country="<option value='' selected='selected'>-- Select Country --</option>";
countryAll="";
cityAll="";
while(str1.length>0)
{
if(str1.indexOf(":")!=-1) // index value colon tak chalegi na chalne par iski value not equal to -1 hogi
{
var c=str1.substring(0,str1.indexOf(":"));
var c1=str1.substring(str1.indexOf(":")+1,str1.indexOf(","));
if(countryAll.indexOf(c)==-1)
{
countryAll=countryAll+"<option value="+c+">"+c+"</option>";
}
if(cityAll.indexOf(c1)==-1)
{
cityAll=cityAll+"<option value="+c1+">"+c1+"</option>";
}
str1=str1.substring(str1.indexOf(",")+1);
str1=str1.trim();
}
else
{
str1="";
}
}
countryAll=countryAll+"<option value=All>All</option>";
cityAll=cityAll+"<option value=All>All</option>";
document.getElementById("country").innerHTML = countryAll;
document.getElementById("city").innerHTML = cityAll;
}
function setCity()
{
var str = " INDIA:MUMBAI, INDIA:PUNE, PAKISTAN:ISLAMABAD, PAKISTAN:KARACHI, PAKISTAN:LAHORE, USA:CALIFORNIA, USA:TEXAS, USA:SAN DIEGO, INDIA:DELHI, ";
var str=str.trim();
var city="";
var country=document.getElementById("country").value.trim();
while(str.length>0)
{
if(str.indexOf(country)!=-1)
{
str=str.substring(str.indexOf(country));
var c=str.substring(str.indexOf(country)+country.length+1,str.indexOf(","));
city=city+"<option value="+c+">"+c+"</option>";
str=str.substring(str.indexOf("c")+c.length+1);
str=str.trim();
}
else
{
str="";
}
}
city=city+"<option value=All>All</option>";
document.getElementById("city").innerHTML = city;
if(country=='All')
document.getElementById("city").innerHTML = cityAll;
}
function getcountry(){
var str1 = " ,INDIA:MUMBAI, INDIA:PUNE, PAKISTAN:ISLAMABAD, PAKISTAN:KARACHI, PAKISTAN:LAHORE, USA:CALIFORNIA, USA:TEXAS, USA:SAN DIEGO, INDIA:DELHI, ";
var str1=str1.trim();
var city=document.getElementById("city").value.trim();
str1=str1.substring(0,str1.indexOf(city)+city.length);
var c=str1.substring(str1.lastIndexOf(",")+1,str1.lastIndexOf(":"));
var country=country+"<option value="+c+">"+c+"</option>";
country=country+"<option value=All>All</option>";
document.getElementById("country").innerHTML = country;
if(city=='All')
document.getElementById("country").innerHTML = countryAll;
}
</script>
</body>
</html>