[英]Three dimensional Javascript array
我正在嘗試構建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>
如您所見,上面的代碼根據我選擇的內容生成了一個模型下拉菜單,現在我想要實現的是在其中添加一個級別,以便他們單擊一個省,然后將城市拖放到向下將出現,並且當他們選擇城市時,將出現購物中心。
解決這個問題的最佳方法是什么?
提前感謝!
如果你有這樣的結構
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" });
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.