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

试试这个：

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] 业务的。

基本上，每当您设置这样的结构时，如果您可以使用对象和数组字面量进行设置，事情就会变得更容易。

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

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