动态依赖的下拉菜单没有数据库的Jquery

Question

我试图做一个动态从属下拉选择菜单与国家，州和城市只有jquery/javascrip和HTML，但是当选择国家直接选择的城市和我已经看到了很多的教程，问题是，我不希望使用的数据库，我想直接创建对象，如果有人可以帮助我，这里是我的代码：

$(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

我发现的第一个错误是一个名为“list”的函数，这个名字是保留的。 - 因此改变函数的名字，例如... getList（）。

第二个错误是当你想调用这个对象的值。

此负载状态下拉列表：

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']); 
      }); 
     }); 
    } 

此负载一个国家的城市：

$('#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>'); 
        } 
        }); 
       }); 
      } 
      }); 

这是代码完全地功能添加它的状态宣布后，检查它，享受它:)

$("#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>'); 
        } 
        }); 
       }); 
      } 
      }); 

我最后提示： 阅读一些关于浩用ajax做这件事比用这种方法做得更好。