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:  javascript dynamic drop down list country state city

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>


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  PHP Laravel Add Days Hours Minutes To Datetime
  2. Read Also:  country state city drop down list in php mysql
  3. Read Also:  Simple Model Popup Box using HTML CSS and JavaScript
  4. Read Also:  Laravel 5.5 - Get Last Inserted ID With Example
  5. Read Also:  setinterval jquery Example
  6. Read Also:  jquery replace newline with br Example - Convert new lines to br - nl2br function
  7. Read Also:  Laravel 5.8 get current url with parameters
  8. Read Also:  Error incorrect format parameter phpmyadmin
  9. Read Also:  how to submit a form using ajax without page refresh?
  10. Read Also:  File Type validation using Javascript
CLOSEX