Question

我需要使用jQuery创建一个复杂的级联下拉列表。这是问题所在。我有几个州及其各自的县。第一个下拉列表将显示州，第二个下拉列表仅显示该选定州的县。我已经知道使用这些链接（以及我现在不记得的另一个链接）：

How to populate a cascading Dropdown with JQuery

现在的问题是我需要为数组添加另一个维度。我有州，县和县的代码。

我正计划使用类似的东西：

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

3D数组级联下拉列表jquery

2 个答案: