3D Array cascading dropdown list jquery

Question

I need to create a complex cascading dropdown list using jQuery. This is the issue. I have several states and its respective counties. The first dropdown will show the states and the second will only show the counties for that selected state. This I have it already figured out using these link (and another ones that I don't remember right now):

How to populate a cascading Dropdown with JQuery

Three dimensional Javascript array

The issue now is that I need to add another dimension to the array. I have state, county, and the county code.

I was planing to use something like:

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

or this version (I think the code would be easier to read this way)

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

And then somehow use .split("|") to separate them. Again, the State-County relation works using the first vesion. What I need to be able to extract the code of the selected county to use it somewhere else, possible for a nother dropdown list. This may look like a simple question for some of you, but I'm just learning JS.

Thanks!

score 1 · Answer 1 · answered Mar 07 '14 at 04:07

Glad you got it working.

I just want to mention that you can simplify this bit of code in a major way and make it easier to maintain:

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

Try this instead:

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

This may be more lines of code, but that's only because I formatted it for readability. It's much less complex, which is the important thing. Note how it gets rid of all the states[0] and states[1] business.

Basically, whenever you're setting up a structure like this, if you can do it with object and array literals it will make things easier.

Thanks for the suggestion. I know it is best practice to do it your way. But the thing is that it was a lot easier for me to do it using the states[0], states[1], etc because it is more that just two states, and having them all in an Excel spreadsheet (and the counties), I just used Concatenate function to create all the lines. It was just a matter of convenience. Do you have any suggestions how to do this using states[0]="AL|Autauga|1"? This will really be a lot simpler if I could figure out how. Thanks again? — cubanGuy, Mar 07 '14 at 13:42

score 0 · Accepted Answer · answered Mar 07 '14 at 03:22

It is working now. Just in case it could be helpful to anyone, or if anybody has a better suggestion:

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 Array cascading dropdown list jquery

2 Answers2