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

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.   Show Multiple Checkbox Checked With Multiple Array Using Php
  2.   How To Fix Laravel Specified Key Was Too Long Error?
  3.   Jquery $.grep() Multiple Conditions
  4.   how to implement custom captcha code in php Script?
  5.   How to get last inserted id in Laravel
  6.   laravel ajax csrf tokens Example jQuery Ajax Call
  7.   PHP Get HTTP_HOST Name using Laravel Example
  8.   Simple PHP Data Type Conversion Example
  9.   Angular Cascading Dropdown Example With Demo
  10.   ErrorException in Builder.php[solution]