Matriz tridimensional de Javascript

Estoy tratando de construir una matriz de Javascript 3D, pero no estoy seguro de cómo hacerlo, básicamente tengo 3 matrices, Provincias, Ciudades y Centros Comerciales, todo en sucesión, así que quiero crear una matriz 3D para almacenar todos los datos y luego escribe algo de jQuery / Javascript para obtener lo que necesito.

Tengo un script que puede llenar una lista desplegable con elementos de matriz, pero ahora le estoy agregando una dimensión adicional y me estoy confundiendo un poco sobre cómo proceder, aquí está el código que tengo hasta ahora,

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

El HTML:

  

Select one one two three four

Como puede ver, el código anterior genera un menú desplegable de modelos dependiendo de lo que selecciono, ahora lo que quiero lograr ahora es agregarle un nivel más, para que hagan clic en una provincia, luego las ciudades caigan. Aparecerá abajo, y cuando elijan una ciudad, aparecerán los centros comerciales.

¿Cuál sería la mejor manera de abordar esto?

Gracias de antemano!

Si tienes una estructura como esta

 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: [] } ] } ]; 

Entonces puedes rellenar los menús desplegables así:

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

Y ante una acción:

 $('#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 ); }); 

EDITAR

Si la estructura de datos en la parte superior parece difícil de leer, por cierto, es exactamente lo mismo que lo siguiente:

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