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