Java, .NET, PHP, PYTHON, ANGULAR, .NET, ML, Data Scince, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

Select Country State and City Program using JavaScript 

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 a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post