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

Question

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

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

JQuery:

<script> 
    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("<select name='model' id='sub'>"); 
       for (x in model[curSel]) 
       { 

        $('#sub').append("<option value='" + model[curSel][x] + "'>" + model[curSel][x] + "</option>"); 
       } 

      }else{ 
       $('#model').css({'display' : 'block'}); 
      } 
     } 

</script> 

HTML-:

<form> 
<p> 
<span class='left'><label for='make'>Make: </label></span> 
<span class='right'><select name='make' id='make' onchange='makeModel(this);'> 
<option value='0'>Select one</option> 
<option value='1'>one</option> 
<option value='2'>two</option> 
<option value='3'>three</option> 
<option value='4'>four</option> 
</select> 
</span> 
</p> 
<p> 
<div id='model'></div> 
</p> 
</form> 

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

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

Thanx заранее!

Answer 1

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

var provinces = [ 
    { name: "Province A", cities: [ 
     { name: "City A.A", malls: [ 
      { name: "Mall A.A.1" }, 
      { name: "Mall A.A.2" } 
     ] }, 
     { name: "City A.B", malls: [ 
      { name: "Mall A.B.1" } 
     ] } 
    ] }, 
    { name: "Province B", cities: [ 
     { name: "City B.A", malls: [ 
      { name: "Mall B.A.1" }, 
      { name: "Mall B.A.2" } 
     ] }, 
     { name: "City B.B", malls: [] } 
    ] } 
]; 

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

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

И при действии:

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

EDIT

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

var provinces = []; 

// populate provinces 
provinces.push({ name: "Province A", cities: [] }); 
provinces.push({ name: "Province B", cities: [] }); 

// populate cities 
provinces[0].cities.push({ name: "City A.A", malls: [] }); 
provinces[0].cities.push({ name: "City A.B", malls: [] }); 
provinces[1].cities.push({ name: "City B.A", malls: [] }); 
provinces[1].cities.push({ name: "City B.B", malls: [] }); 

// populate malls 
provinces[0].cities[0].malls.push({ name: "Mall A.A.1" }); 
provinces[0].cities[0].malls.push({ name: "Mall A.A.2" }); 
provinces[0].cities[1].malls.push({ name: "Mall A.B.1" }); 
provinces[1].cities[0].malls.push({ name: "Mall B.A.1" }); 
provinces[1].cities[0].malls.push({ name: "Mall B.A.2" });