Dynamic dependent dropdown menu Jquery without database

Question

I'm trying to do a dynamic dependent dropdown select menu with country, state and city only with jquery/javascrip and HTML, but when the country is selected the options go directly to the city and I already saw a lot of tutorials, the problem is that I don't want to use a database, I want to create the objects directly, if somebody could help me, here is my code:

  $(document).ready(function(){ var countries = { 'mexico': [{ display: "Ciudad de Mexico", value: "mx-city" }, { display: "Jalisco", value: "jalisco" }], 'usa': [{ display: "Texas", value: "texas" }, { display: "Ohio", value: "ohio" }], 'canada': [{ display: "Montreal", value: "montreal" }, { display: "Toronto", value: "toronto" }] }; var states = { 'mx-city': [{ display: "Benito Juarez", value: "benito-juarez" }, { display: "Cuauhtemoc", value: "cuauhtemoc" }], 'jalisco': [{ display: "Zapopan", value: "zapopan" }, { display: "Guadalajara", value: "Guadalajara" }], 'texas': [{ display: "San Antonio", value: "san-antonio" }, { display: "Austin", value: "austin" }], 'ohio': [{ display: "Colombus", value: "colombus" }, { display: "Cleveland", value: "cleveland" }], 'montreal': [{ display: "Quebec", value: "Quebec" }, { display: "Vermont", value: "vermont" }], 'toronto': [{ display: "Ontario", value: "ontario" }, { display: "York", value: "york" }] }; $("#parent_selection").change(function() { var parent = $(this).val(); if (countries[parent] == undefined) { return $("#child_selection").html('Selecciona tu Estado'); } list(countries[parent]); }); function list(array_list){ $("#child_selection").html(""); $(array_list).each(function (i) { $("#child_selection").append('<option value="'+array_list[i].value+'">'+array_list[i].display+"</option>"); }); } $('#child_selection').change(function() { var state = $(this).val(); if (states[state] == undefined) { return $("#child").text('Selecciona tu ciudad'); } list(states[state]); }); function list(array_list){ $("#child").html(""); $(array_list).each(function (i) { $("#child").append('<option value="'+array_list[i].value+'">'+array_list[i].display+"</option>"); }); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="" method="" enctype="application/json"> <br/>Nombre: <input type="text" /> <br/>Edad: <input type="text" /> <br/>Pais: <select name="parent_selection" id="parent_selection"> <option value="">Selecciona tu pais</option> <option value="mexico">Mexico</option> <option value="usa">USA</option> <option value="canada">Canada</option> </select> <br />Estado: <select name="child_selection" id="child_selection"> <option value="">Selecciona tu estado</option> </select> <br/>Ciudad: <select name="child" id="child"> <option value="">Selecciona tu ciudad</option> </select> <input type="submit" value="Submit" /> </form> 

Answer 1

The first mistake i found was a function called "list" this name are reserved. - So change the name of function something like... getList().

The second mistake was when you want to call a value of this object.

This load the states dropdown :

   function getList(listCountries) {
       $("#child_selection").html(""); 
         $(listCountries).each(function (i) { 
           var arrayStates = states[listCountries[i]['value']];
           $.each(arrayStates,function(i){
             $("#child_selection").append('<option value="'+arrayStates[i]['value']+'">'+arrayStates[i]['display']);
           }); 
        });
    }

This load the cities of a country :

$('#child_selection').change(function() {
           var state = $(this).val();       
           var parent = $("#parent_selection").val();

             if (countries[parent] == undefined) {
               //DO SOMETHING
             } else {
               var listCountries = countries[parent];
                $(listCountries).each(function (i) { 
                  var arrayStates = states[listCountries[i]['value']];
                   $.each(arrayStates,function(i){
                     if ( state === arrayStates[i]['value'] ) {
                       $("#child").html("");
                       $("#child").append('<option value="'+listCountries[i]['value']+'">'+listCountries[i]['display']+'</option>');
                     }
                   });
                });
             }
          }); 

This is the code completly functional add it after declaration of states , check it and enjoy it:)

$("#parent_selection").change(function() {
        var parent = $(this).val(); 
         if (countries[parent] == undefined) {
            return $("#child_selection").html('Selecciona tu Estado');
       }

        getList(countries[parent]);

       });

        function getList(listCountries) {
           $("#child_selection").html(""); 
             $(listCountries).each(function (i) { 
               var arrayStates = states[listCountries[i]['value']];
               $.each(arrayStates,function(i){
                 $("#child_selection").append('<option value="'+arrayStates[i]['value']+'">'+arrayStates[i]['display']+'</option>');
               }); 
            });
        }



        $('#child_selection').change(function() {
           var state = $(this).val();       
           var parent = $("#parent_selection").val();

             if (countries[parent] == undefined) {
               //DO SOMETHING
             } else {
               var listCountries = countries[parent];
                $(listCountries).each(function (i) { 
                  var arrayStates = states[listCountries[i]['value']];
                   $.each(arrayStates,function(i){
                     if ( state === arrayStates[i]['value'] ) {
                       $("#child").html("");
                       $("#child").append('<option value="'+listCountries[i]['value']+'">'+listCountries[i]['display']+'</option>');
                     }
                   });
                });
             }
          }); 

My last tip: Read something about how to do this with ajax will be better than this method to do it.