既存のコードに組み込まれていると依存するドロップダウンコードが機能しない

Question

前のドロップダウンで選択したオプションに基づいてリストに値を設定するドロップダウンを作成しようとしていますが、2番目のドロップダウンが機能しません。ここで私はサイトが見つかりましたhttp://www.9lessons.info/2010/08/dynamic-dependent-select-box-using.htmlこれは私が欲しいものですが、それは私のために働いていない。別々に動作していますが、既存のコードに追加すると機能しません。助けてください！

Answer 1

私はこれがあなたが探しているものだと思っています。下にテストし、私に知らせてください。スタックオーバーフローへ

var countries = [{id: 1, name: "United States"}, {id: 2, name: "Canada"}, {id: 3, name: "United Kingdom"}, {id: 4, name: "France"}]; 
 

 
var states = [{id: 1, country_id: 1, name: "OH"}, {id: 2, country_id: 1, name: "NY"}, {id: 3, country_id: 2, name: "Montreal"}, {id: 4, country_id: 2, name: "Ontario"}, {id: 5, country_id: 3, name: "Scotland"}, {id: 6, country_id: 3, name: "Ireland"}, {id: 7, country_id: 4, name: "Normandy"}]; 
 

 
var option = ''; 
 
$.each(countries, function(index, value) { 
 
    option += '<option value="'+ value.id + '">' + value.name + '</option>'; 
 
}); 
 

 
$('#country').append(option); 
 

 
$('#country').on('change', function (e) { 
 
    var id = $(this).val(); 
 
    $('#state').empty() 
 
    var results = $.grep(states, function(e){ return e.country_id == id; }); 
 
    var stateOptions = ''; 
 
    $.each(results, function(index, value) { 
 
    stateOptions += '<option value="'+ value.id + '">' +  value.name + '</option>'; 
 
    }); 
 

 
    $('#state').append(stateOptions); 
 
}); 
 

 
$('#country').trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="country"> 
 

 
</select> 
 

 
<select id="state"> 
 

 
</select>