三維Javascript數組

Question

我想構建一個3D Javascript數組，但我不確定如何去做，基本上我有3個數組，省，城市和商場都在繼承，所以我想創建一個3D數組存儲所有數據，然後編寫一些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> 

因此，大家可以看到，上面的代碼生成一個下拉的根據機型的菜單什麼使我SEL現在我現在想要實現的是增加一個級別，所以他們將點擊一個省，然後城市下降將出現，當他們選擇一個城市時，商場將出現。

接觸這個的最好方法是什麼？

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

編輯

如果在上面的數據結構看起來很難看，順便說一句，這是完全一樣的事情如下所示：

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