Show country state city dropdown select box using javascript

here we learn to simple way for Show district list as per selection your country and state select in dropdown select box using Javascript Example.

country state city dropdown javascript

in this country state city dropdowns javascript example first of all you need to Select your Country from Country list dropdown and then here appear your selected Country to filtering your State list and last you will appear to selected your Country & State to filtering your District list like as a bellow javascript dynamic drop down list country state city examples.

JavaScript Code

      <script>
         var liveObjOfState = {
         "India": { "Delhi": ["new Delhi", "North Delhi"],
         "Kerala": ["Thiruvananthapuram", "Palakkad"],
         "Goa": ["North Goa", "South Goa"],
         },
         "Australia": {
         "South Australia": ["Dunstan", "Mitchell"],
         "Victoria": ["Altona", "Euroa"]
         }, "Canada": {
         "Alberta": ["Acadia", "Bighorn"],
         "Columbia": ["Washington", ""]
         },
         }
         window.onload = function () {
         var selectCountry = document.getElementById("selectCountry"),
         selectState = document.getElementById("selectState"),
         countrystatecitySelect = document.getElementById("countrystatecitySelect");
         for (var country in liveObjOfState) {
         selectCountry.options[selectCountry.options.length] = new Option(country, country);
         }
         selectCountry.onchange = function () {
         selectState.length = 1; // delete all options bar earliest
         countrystatecitySelect.length = 1; // delete all options bar earliest
         if (this.selectedIndex < 1) return; // done 
         for (var state in liveObjOfState[this.value]) {
         selectState.options[selectState.options.length] = new Option(state, state);
         }
         }
         selectCountry.onchange(); // reset in case page is reloaded
         selectState.onchange = function () {
         countrystatecitySelect.length = 1; // delete all options bar earliest
         if (this.selectedIndex < 1) return; // done 
         var region = liveObjOfState[selectCountry.value][this.value];
         for (var i = 0; i < region.length; i++) {
         countrystatecitySelect.options[countrystatecitySelect.options.length] = new Option(region[i], region[i]);
         }
         }
         }
      </script>

HTML Code

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>pakainfo.com</title>
   <body>
      <form name="myform" id="myForm">
         Choose Country: 
         <select name="state" id="selectCountry" size="1">
            <option value="" selected="selected">Choose Country</option>
         </select>
         <br>
         <br>
         Choose State: 
         <select name="countrya" id="selectState" size="1">
            <option value="" selected="selected">Please Choose Country earliest</option>
         </select>
         <br>
         <br>
         Choose District: 
         <select name="region" id="countrystatecitySelect" size="1">
            <option value="" selected="selected">Please Choose State earliest</option>
         </select>
         <br>
         <input type="submit">
      </form>
      <closeform></closeform>
   </body>
</html>

Also Read: Generic Country & State Dropdown List

Read Also:  file upload size limit validation in javascript

Complete Code : country state city dropdown

index.html

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Untitled Document</title>
      <script>
         var liveObjOfState = {
         "India": { "Delhi": ["new Delhi", "North Delhi"],
         "Kerala": ["Thiruvananthapuram", "Palakkad"],
         "Goa": ["North Goa", "South Goa"],
         },
         "Australia": {
         "South Australia": ["Dunstan", "Mitchell"],
         "Victoria": ["Altona", "Euroa"]
         }, "Canada": {
         "Alberta": ["Acadia", "Bighorn"],
         "Columbia": ["Washington", ""]
         },
         }
         window.onload = function () {
         var selectCountry = document.getElementById("selectCountry"),
         selectState = document.getElementById("selectState"),
         countrystatecitySelect = document.getElementById("countrystatecitySelect");
         for (var country in liveObjOfState) {
         selectCountry.options[selectCountry.options.length] = new Option(country, country);
         }
         selectCountry.onchange = function () {
         selectState.length = 1; // delete all options bar first
         countrystatecitySelect.length = 1; // delete all options bar first
         if (this.selectedIndex < 1) return; // done 
         for (var state in liveObjOfState[this.value]) {
         selectState.options[selectState.options.length] = new Option(state, state);
         }
         }
         selectCountry.onchange(); // reset in case page is reloaded
         selectState.onchange = function () {
         countrystatecitySelect.length = 1; // delete all options bar first
         if (this.selectedIndex < 1) return; // done 
         var region = liveObjOfState[selectCountry.value][this.value];
         for (var i = 0; i < region.length; i++) {
         countrystatecitySelect.options[countrystatecitySelect.options.length] = new Option(region[i], region[i]);
         }
         }
         }
      </script>
   </head>
   <body>
      <form name="myform" id="myForm">
         Choose Your Country: 
         <select name="state" id="selectCountry" size="1">
            <option value="" selected="selected">Choose Country</option>
         </select>
         <br>
         <br>
         Choose Your State: 
         <select name="countrya" id="selectState" size="1">
            <option value="" selected="selected">Please Choose Country earliest</option>
         </select>
         <br>
         <br>
         Choose Your District: 
         <select name="region" id="countrystatecitySelect" size="1">
            <option value="" selected="selected">Please Choose State earliest</option>
         </select>
         <br>
         <input type="submit">
      </form>
      <closeform></closeform>
   </body>
</html>