三维JavaScript数组 [英] Three dimensional Javascript array
问题描述
我有一个脚本，可以使用数组项目填充下拉列表，但现在我添加了一个额外的维度，我对于如何继续进行了一点点的困惑，这里是我迄今为止的代码，
< 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'）;
模型[3] =新阵列（'Amandla'，'Auto Union'，'霍希'）;
函数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：
<形式>
< p>
< span class ='left'>< label for ='make'> Make：< / label>< / span>
< span class ='right'>< select name ='make'id ='make'onchange ='makeModel（this）;'>
< option value ='0'>选择一个< / 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提前！
如果你有这样的结构
var provinces = [
{name：省A，城市：[
{name：City AA，malls：[
{name：Mall AA1}，
{name ：Mall AA2}
]}，
{name：City AB，malls：[
{name：Mall AB1}
]}
$ {name：省B，城市：[
{name：City BA，malls：[
{name：Mall BA1}，
{名称： Mall B.A.2}
]}，
{name：City B.B，malls：[]}
]}
];
然后您可以像下面这样填充下拉菜单：
函数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'）。change（function（）{
var provinceIndex = $（this）.val（）;
var province = provinces [provinceIndex];
$ b populateDropdown（$（'＃cities'），province.cities）;
$（'＃malls'）。hide（）;
}）;
'（'＃cities'）。change（function（）{
var provinceIndex = $（'＃provinces'）。val（）;
var province = provinces [ （CityIndex];
var cityIndex = $（this）.val（）;
var city = province.cities [cityIndex];
$ b populateDropdown（$（' #malls'），city.malls）;
}）;
编辑
如果上面的数据结构看起来很难看，顺便说一下，它和以下内容完全一样：
var provinces = [];
//填充省份
provinces.push（{名称：省A，城市：[]}）;
provinces.push（{名称：省B，城市：[]}）;
//填充城市
个省份[0] .cities.push（{名称：City A.A，malls：[]}）;
个省[0] .cities.push（{名称：城市A.B，商场：[]}）;
个省份[1] .cities.push（{名称：City B.A，malls：[]}）;
个省份[1] .cities.push（{名称：城市B.B，商场：[]}）;
//填充商场
个省份[0] .cities [0] .malls.push（{名称：Mall A.A.1}）;
个省份[0] .cities [0] .malls.push（{名称：Mall A.A.2}）;
个省[0] .cities [1] .malls.push（{名称：Mall A.B.1}）;
个省份[1] .cities [0] .malls.push（{名称：Mall B.A.1}）;
个省份[1] .cities [0] .malls.push（{名称：Mall B.A.2}）;
I am trying to build a 3D Javascript array, but I am unsure of how to do it, basically I have 3 arrays, Provinces, Cities and Malls all in succession, so I want to create a 3D array to store all the data in and then write some jQuery/Javascript to get out what I need.
I have a script that can populate a drop down list with array items, but now I am adding an extra dimension to it and I am getting a little confused as to how to proceed, here is the code I have thus far,
The 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>
The 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>
So as you can see, the above code generates a drop down menu of models depending on what make I select, now what I want to achieve now is adding one more level to it, so they will click on a province, then the cities drop down will appear, and when they choose a city, the malls will appear.
What would be the best way of approaching this?
Thanx in advance!
If you have a structure like this one
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: [] }
] }
];
Then you can populate the dropdowns like so:
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 );
And upon an 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 );
});
EDIT
If the data structure on top looks hard to read, by the way, it's the exact same thing as the following:
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" });
这篇关于三维JavaScript数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
