Трехмерный массив Javascript

Я пытаюсь построить массив 3D Javascript, но я не уверен, как это сделать, в основном у меня есть 3 массива, провинций, городов и торговых центров, поэтому я хочу создать 3D-массив для хранения всех данных и затем напишите jQuery / Javascript, чтобы узнать, что мне нужно.

У меня есть сценарий, который может заполнить выпадающий список элементами массива, но теперь я добавляю дополнительное измерение к нему, и я немного запутался в том, как действовать дальше, вот код, который у меня есть до сих пор,

JQuery:

 model[0] = new Array( 'Arnage', 'Azure', 'Brooklands', 'Continental', 'Corniche', 'Eight', 'Mulsanne', 'Series II', 'Turbo R', 'Turbo RT'); model[1] = new Array( '412', '603', 'Beaufighter', 'Blenheim', 'Brigand', 'Britannia'); model[2] = new Array( 'Inyathi', 'Rhino'); model[3] = new Array( 'Amandla', 'Auto Union', 'Horch'); function makeModel(obj){ var curSel=obj.options[obj.selectedIndex].value ; var x; if (curSel != 'null'){ $('#model').css({'display' : 'block'}); $('#model').html(""); for (x in model[curSel]) { $('#sub').append("" + model[curSel][x] + ""); } }else{ $('#model').css({'display' : 'block'}); } }  

HTML:

 

Select one one two three four

Итак, как вы можете видеть, приведенный выше код генерирует выпадающее меню моделей в зависимости от того, что я выбираю, теперь то, что я хочу достичь сейчас, добавляет к нему еще один уровень, поэтому они нажимают на провинцию, а затем города вниз, и когда они выберут город, появятся торговые центры.

Какой был бы лучший способ приблизиться к этому?

Thanx заранее!

Если у вас есть такая структура, как эта

 var provinces = [ { name: "Province A", cities: [ { name: "City AA", malls: [ { name: "Mall AA1" }, { name: "Mall AA2" } ] }, { name: "City AB", malls: [ { name: "Mall AB1" } ] } ] }, { name: "Province B", cities: [ { name: "City BA", malls: [ { name: "Mall BA1" }, { name: "Mall BA2" } ] }, { name: "City BB", malls: [] } ] } ]; 

Затем вы можете заполнить выпадающие списки следующим образом:

 function populateDropdown(drop, items) { drop.empty(); for(var i = 0; i < items.length; i++) { drop.append(' 

И после действия:

 $('#provinces').change(function() { var provinceIndex = $(this).val(); var province = provinces[provinceIndex]; populateDropdown( $('#cities'), province.cities ); $('#malls').hide(); }); $('#cities').change(function() { var provinceIndex = $('#provinces').val(); var province = provinces[provinceIndex]; var cityIndex = $(this).val(); var city = province.cities[cityIndex]; populateDropdown( $('#malls'), city.malls ); }); 

РЕДАКТИРОВАТЬ

Если структура данных сверху выглядит трудно читаемой, кстати, это то же самое, что и следующее:

 var provinces = []; // populate provinces provinces.push({ name: "Province A", cities: [] }); provinces.push({ name: "Province B", cities: [] }); // populate cities provinces[0].cities.push({ name: "City AA", malls: [] }); provinces[0].cities.push({ name: "City AB", malls: [] }); provinces[1].cities.push({ name: "City BA", malls: [] }); provinces[1].cities.push({ name: "City BB", malls: [] }); // populate malls provinces[0].cities[0].malls.push({ name: "Mall AA1" }); provinces[0].cities[0].malls.push({ name: "Mall AA2" }); provinces[0].cities[1].malls.push({ name: "Mall AB1" }); provinces[1].cities[0].malls.push({ name: "Mall BA1" }); provinces[1].cities[0].malls.push({ name: "Mall BA2" });