本文通过实例讲解如何在JavaScript中读取和操作JSON格式的二维数组，探讨其在数据处理中的应用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select class="" name="" id="select1">
</select>
<select class="" name="" id="select2">
</select>
<script type="text/javascript">
var carClass = [
{
"id":0,
"name":"微型车"
},{
"id":1,
"name":"小型车"
},{
"id":2,
"name":"紧凑车"
},{
"id":3,
"name":"中型车"
},{
"id":4,
"name":"中大型车"
},{
"id":5,
"name":"豪华型车"
},{
"id":6,
"name":"MPV"
},{
"id":7,
"name":"SUV"
},{
"id":8,
"name":"跑车"
},{
"id":9,
"name":"面包车"
}
];
var car = [
["奥拓","比亚迪F0","奔奔","吉利熊猫","奔奔Mini","北斗星","众泰E200","fortwo（进口）","北斗星（X5）","乐驰","大众UP!（进口）","奇瑞QQ","知豆电车","forfour（进口）","江南TT","北汽新能源EC系列","知豆D2","奇瑞eQ","大众Cross UP!","众泰Z100"],
["大众POLO","飞度","起亚K2三厢","宝骏310","威驰","YARiS L 致炫","哥瑞","赛欧3","瑞纳三厢","吉利新金刚三厢","雨燕","竞瑞","长安CX20","晶锐","大众CrossPOLO","MINI 3-DOOR","骊威","YARiS L 致享","锋范经典","长城M4"],
["卡罗拉","速腾","思域","朗逸","英朗","捷达","科鲁兹三厢","轩逸","宝来","凌渡","新桑塔纳","昂克赛拉三厢","高尔夫","吉利帝豪GL","奥迪A3","凌派","朗动","福克斯三厢","吉利新帝豪三厢","雷凌"],
["新蒙迪欧","奥迪A4L","雅阁","帕萨特","迈腾","宝马3系","凯美瑞","奔驰C级","吉利博瑞","天籁","阿特兹","君威","MISTRA名图","迈锐宝","一汽-大众CC","凯迪拉克ATS-L","起亚K5","速派","思铂睿","锐志"],
["奥迪A6L","宝马5系","君越","奔驰E级","雷克萨斯ES","皇冠","福特金牛座","凯迪拉克XTS","捷豹XFL","众泰Z700","辉昂","沃尔沃S90长轴版","传祺GA8","红旗H7","玛莎拉蒂Ghibli","宝马5系（进口）","雪铁龙C6","Model S（进口）","奔驰CLS级（进口）","捷豹XF"],
["宝马7系（进口）","奔驰S级（进口）","奥迪A8L（进口）","玛莎拉蒂总裁","凯迪拉克CT6","奥迪A7（进口）","辉腾（进口）","林肯Continental","迈巴赫S级","阿斯顿马丁Lagonda","幻影","慕尚","捷豹XJ","红旗L5","欧陆","雷克萨斯LS","飞驰","奥迪RS7（进口）","奔驰S级AMG","奥迪S8（进口）"],
["宝骏730","五菱宏光S","别克GL8","奥德赛","长安欧尚","艾力绅","途安L","五菱宏光S1","途安","瑞风M5","五菱宏光","瑞风M4","风行S500","埃尔法（进口）","菱智","瑞风M3","逸致","长安欧诺","上汽大通MAXUS G10","北汽幻速S3L"],
["哈佛H6","途观","传祺GS4","吉利博越","长安CS75","本田CR-V","汉兰达","指南者","昂科威ENVISION","锐界","全新途胜","奥迪Q5","宝骏510","本田XR-V","缤智","冠道","陆丰X7","传祺GS8","荣威RX5","宝马X1"],
["福特Mustang","保时捷Panamera","丰田86","科迈罗（进口）","保时捷718","奥迪R8（进口）","日产GT-R","宝马i8（进口）","保时捷911","保时捷918","奥迪TT（进口）","Aventador","法拉利458（进口）","讴歌NSX","威航","奔驰E级双门","宝马Z4（进口）","玛莎拉蒂GT","斯巴鲁BRZ（进口）","宝马4系"],
["五菱之光","五菱荣光","五菱荣光V","五菱之光V","东风小康K17","征程","长安之星","新海狮","上汽大通MAXUS V80","长安之星2","长安之星3","大海狮","北汽威旺306","长安之星7","瑞星M80","风景G9","幻速H2V","瑞星M90","长安之星9","东风小康K07"]
];
// 把carClass 的option 循环出来
var html = "";
for (index in carClass){
html += "<option value=\""+index+"\">"+carClass[index].name+"</option>"
}
$("#select1").html(html)
$("#select1").change(function(){
var index = $("#select1").val();
changeCar(index)
})
// 这个方法绑定到select1 上
function changeCar(index){
var cars = car[index]
if (cars == null){
return ;
}
// 把对应的 car 循环出来
var html = "";
for (i in cars){
html += "<option>"+cars[i]+"</option>"
}
// 把新循环好的放进去
$("#select2").html(html)
}
</script>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select class="" name="" id="select1">
</select>
<select class="" name="" id="select2">
</select>
</body>
<script type="text/javascript">
var carClass = [
{
"id":0,
"name":"微型车"
},{
"id":1,
"name":"小型车"
},{
"id":2,
"name":"紧凑车"
},{
"id":3,
"name":"中型车"
},{
"id":4,
"name":"中大型车"
},{
"id":5,
"name":"豪华型车"
},{
"id":6,
"name":"MPV"
},{
"id":7,
"name":"SUV"
},{
"id":8,
"name":"跑车"
},{
"id":9,
"name":"面包车"
}
];
var car = [
["奥拓","比亚迪F0","奔奔","吉利熊猫","奔奔Mini","北斗星","众泰E200","fortwo（进口）","北斗星（X5）","乐驰","大众UP!（进口）","奇瑞QQ","知豆电车","forfour（进口）","江南TT","北汽新能源EC系列","知豆D2","奇瑞eQ","大众Cross UP!","众泰Z100"],
["大众POLO","飞度","起亚K2三厢","宝骏310","威驰","YARiS L 致炫","哥瑞","赛欧3","瑞纳三厢","吉利新金刚三厢","雨燕","竞瑞","长安CX20","晶锐","大众CrossPOLO","MINI 3-DOOR","骊威","YARiS L 致享","锋范经典","长城M4"],
["卡罗拉","速腾","思域","朗逸","英朗","捷达","科鲁兹三厢","轩逸","宝来","凌渡","新桑塔纳","昂克赛拉三厢","高尔夫","吉利帝豪GL","奥迪A3","凌派","朗动","福克斯三厢","吉利新帝豪三厢","雷凌"],
["新蒙迪欧","奥迪A4L","雅阁","帕萨特","迈腾","宝马3系","凯美瑞","奔驰C级","吉利博瑞","天籁","阿特兹","君威","MISTRA名图","迈锐宝","一汽-大众CC","凯迪拉克ATS-L","起亚K5","速派","思铂睿","锐志"],
["奥迪A6L","宝马5系","君越","奔驰E级","雷克萨斯ES","皇冠","福特金牛座","凯迪拉克XTS","捷豹XFL","众泰Z700","辉昂","沃尔沃S90长轴版","传祺GA8","红旗H7","玛莎拉蒂Ghibli","宝马5系（进口）","雪铁龙C6","Model S（进口）","奔驰CLS级（进口）","捷豹XF"],
["宝马7系（进口）","奔驰S级（进口）","奥迪A8L（进口）","玛莎拉蒂总裁","凯迪拉克CT6","奥迪A7（进口）","辉腾（进口）","林肯Continental","迈巴赫S级","阿斯顿马丁Lagonda","幻影","慕尚","捷豹XJ","红旗L5","欧陆","雷克萨斯LS","飞驰","奥迪RS7（进口）","奔驰S级AMG","奥迪S8（进口）"],
["宝骏730","五菱宏光S","别克GL8","奥德赛","长安欧尚","艾力绅","途安L","五菱宏光S1","途安","瑞风M5","五菱宏光","瑞风M4","风行S500","埃尔法（进口）","菱智","瑞风M3","逸致","长安欧诺","上汽大通MAXUS G10","北汽幻速S3L"],
["哈佛H6","途观","传祺GS4","吉利博越","长安CS75","本田CR-V","汉兰达","指南者","昂科威ENVISION","锐界","全新途胜","奥迪Q5","宝骏510","本田XR-V","缤智","冠道","陆丰X7","传祺GS8","荣威RX5","宝马X1"],
["福特Mustang","保时捷Panamera","丰田86","科迈罗（进口）","保时捷718","奥迪R8（进口）","日产GT-R","宝马i8（进口）","保时捷911","保时捷918","奥迪TT（进口）","Aventador","法拉利458（进口）","讴歌NSX","威航","奔驰E级双门","宝马Z4（进口）","玛莎拉蒂GT","斯巴鲁BRZ（进口）","宝马4系"],
["五菱之光","五菱荣光","五菱荣光V","五菱之光V","东风小康K17","征程","长安之星","新海狮","上汽大通MAXUS V80","长安之星2","长安之星3","大海狮","北汽威旺306","长安之星7","瑞星M80","风景G9","幻速H2V","瑞星M90","长安之星9","东风小康K07"]
];
// 把carClass 的option 循环出来
var html = "";
for (index in carClass){
html += "<option value=\""+index+"\">"+carClass[index].name+"</option>"
}
$("#select1").html(html)
$("#select1").change(function(){
var index = $("#select1").val();
changeCar(index)
})
// 这个方法绑定到select1 上
function changeCar(index){
var cars = car[index]
if (cars == null){
return ;
}
// 把对应的 car 循环出来
var html = "";
for (i in cars){
html += "<option>"+cars[i]+"</option>"
}
// 把新循环好的放进去
$("#select2").html(html)
}
</script>
</html>
扫一扫
4851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
