動態依賴的下拉菜單沒有數據庫的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做這件事比用這種方法做得更好。