動的依存ドロップダウンメニューデータベースなしの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（）のように変更してください。

2番目の間違いは、このオブジェクトの値を呼び出すときです。

この負荷状態は、ドロップダウン：

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

これは、状態の宣言の後にそれを追加し、それをチェックして、それを楽しむcompletly機能コードです:)

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

私の最後のヒント： hoについての情報を読むこれを行うには、Ajaxでこれを行うwがこのメソッドよりも優れています。