3D數組級聯下拉列表jquery

Question

我需要使用jQuery創建複雜的級聯下拉列表。這是問題。 我有幾個州和各自的縣。第一個下拉菜單將顯示狀態，第二個下拉菜單僅顯示該選定狀態的縣。這個我就已經想通了使用這些鏈接（這我不記得現在另一個的）：

How to populate a cascading Dropdown with JQuery

Three dimensional Javascript array

現在的問題是，我需要添加其他維度來陣列。我有州，縣和縣的代碼。

我刨使用類似：

var states = [];  
states.push({ name:"AL", counties: [] }); 
states.push({ name:"AK", counties: [] }); 
states[0].counties.push({ name:"Autauga", code: [1] }); 
states[0].counties.push({ name:"Baldwin", code: [3] }); 
states[1].counties.push({ name:"Aleutian Islands", code: [10] }); 
states[1].counties.push({ name:"Anchorage", code: [20] }); 
states[1].counties.push({ name:"Bethel", code: [50] }); 

function populateDropdown(drop, items) { 
drop.empty(); 
for(var i = 0; i < items.length; i++) { 
drop.append('<option value=' + i + '>' + items[i].name + '</option>'); 
} 
drop.show();} 
populateDropdown($('#state'), states); 
$('#state').change(function() { 
var stateIndex = $(this).val(); 
var state = states[stateIndex]; 
populateDropdown($('#county'), state.counties); 
}); 

或這個版本（我認爲的代碼會更容易閱讀這種方式）

var states = new Array(); 
states[0]="AL|Autauga|1"; 
states[0]="AL|Baldwin|3"; 
states[1]="AK|Aleutian Islands|10"; 
states[1]="AK|Anchorage|20"; 
states[1]="AK|Bethel|50"; 

然後以某種方式使用.split（」 |「）將它們分開。州與縣之間的關係再次運用了第一種情緒。我需要能夠提取所選縣的代碼以便在其他地方使用它，可以用於其他下拉列表。這對你們中的一些人來說可能看起來像一個簡單的問題，但我只是在學習JS。

謝謝！

Answer 1

它現在工作。以防萬一它可能對任何人有所幫助，或者如果有人有更好的建議：

var states = []; 
states.push({name: "AL",counties: []}); 
states.push({name: "AK",counties: []}); 
states[0].counties.push({name: "Autauga",code: "1"}); 
states[0].counties.push({name: "Baldwin",code: "3"}); 
states[1].counties.push({name: "Aleutian Islands",code: "10"}); 
states[1].counties.push({name: "Anchorage",code: "20"}); 
states[1].counties.push({name: "Bethel",code: "50"}); 

function populateDropdown(drop, items) { 
drop.empty(); 
for (var i = 0; i < items.length; i++) { 
    drop.append('<option value=' + i + '>' + items[i].name + '</option>'); 
} 
drop.show(); 
} 
populateDropdown($('#state'), states); 
$('#state').change(function() { 
var stateIndex = $(this).val(); 
var state = states[stateIndex]; 
populateDropdown($('#county'), state.counties); 
var countyIndex = $('#county').val(); 
var county = state.counties[countyIndex]; 
$('#countyCode').text(county.code); 
}); 

$('#county').change(function() { 
var stateIndex = $('#state').val(); 
var state = states[stateIndex]; 
var countyIndex = $(this).val(); 
var county = state.counties[countyIndex]; 
$('#countyCode').text(county.code); 
}); 

Answer 2

很高興你得到它的工作。

我只是想提一提，可以簡化這段代碼的重要途徑，並使其易於維護：

var states = []; 
states.push({name: "AL",counties: []}); 
states.push({name: "AK",counties: []}); 
states[0].counties.push({name: "Autauga",code: "1"}); 
states[0].counties.push({name: "Baldwin",code: "3"}); 
states[1].counties.push({name: "Aleutian Islands",code: "10"}); 
states[1].counties.push({name: "Anchorage",code: "20"}); 
states[1].counties.push({name: "Bethel",code: "50"}); 

試試這個：

var states = [ 
    { 
     name: "AL", 
     counties: [ 
      { name: "Autauga", code: "1" }, 
      { name: "Baldwin", code: "3" } 
     ] 
    }, 
    { 
     name: "AK", 
     counties: [ 
      { name: "Aleutian Islands", code: "10" }, 
      { name: "Anchorage", code: "20" }, 
      { name: "Bethel", code: "50" } 
     ] 
    } 
]; 

這可能是更行的代碼，但這只是因爲我爲了便於閱讀而將其格式化。它不那麼複雜，這是重要的。請注意它如何擺脫所有states[0]和states[1]業務。

基本上，只要你設置了這樣的結構，如果你可以用對象和數組文字來做，它會使事情變得更容易。