javascript - 三维 Javascript 数组

Question

我正在尝试构建一个 3D Javascript 数组，但我不确定该怎么做，基本上我有 3 个数组，Provinces、Cities 和 Malls 都是连续的，所以我想创建一个 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>

所以正如你所看到的，上面的代码根据我选择的是什么生成了一个模型下拉菜单，现在我想要实现的是再增加一个级别，所以他们会点击一个省，然后城市下拉列表会出现，当他们选择城市时，商场就会出现。

解决这个问题的最佳方法是什么？

提前致谢!

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

在一个 Action 上:

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