基于jQuery+JSON 二级联动效果

index.xml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基于jQuery+JSON联动效果</title>
<style type="text/css">
.demo{width:80%; margin:20px auto}
.demo h3{height:32px; line-height:32px}
.demo p{line-height:24px}
</style>

<script type="text/javascript" src="jquery.1.7.2-min.js"></script>
<script type="text/javascript" src="serviceType.js"></script>
</head>
<body>
<div>
<input type="hidden" value="" id="types" />
<input type="hidden" value="" id="type" />
<select class="serviceTypes" id="serviceTypes" name="serviceTypes" onchange="changeTypes()"></select>
<select class="serviceType" id="serviceType" name="serviceType"></select>
</div>
</body>
</html>

serviceType.js

var serviceTypeJson = [
{
"code": "100",
"name": "练英语",
"cell": [
{"code":"101","name":"英语"},
{"code":"102","name":"法语"},
{"code":"103","name":"日语"},
{"code":"104","name":"韩语"},
{"code":"105","name":"俄语"},
{"code":"106","name":"德语"},
{"code":"107","name":"瑞典语"},
{"code":"108","name":"挪威语"},
{"code":"109","name":"丹麦语"},
{"code":"110","name":" 冰岛语"},
{"code":"111","name":"西班牙语"},
{"code":"112","name":"葡萄牙语"},
{"code":"113","name":"意大利语"},
{"code":"114","name":"荷兰语"},
{"code":"115","name":"芬兰语"},
{"code":"116","name":"罗马尼亚语"},
{"code":"117","name":"乌克兰语"},
{"code":"118","name":"白俄罗斯语"},
{"code":"119","name":"波兰语"},
{"code":"120","name":"捷克语"},
{"code":"121","name":"斯洛伐克语"},
{"code":"122","name":"塞尔维亚语"},
{"code":"123","name":"克罗地亚语"},
{"code":"124","name":"斯洛文尼亚语"},
{"code":"125","name":"马其顿语"},
{"code":"126","name":"保加利亚语"},
{"code":"127","name":"印度语"},
{"code":"128","name":"乌尔都语"},
{"code":"129","name":"孟加拉语"},
{"code":"130","name":"波斯语"},
{"code":"131","name":"普什图语"},
{"code":"132","name":"阿富汗语"},
{"code":"133","name":"库尔德语"},
{"code":"134","name":"印度尼西亚语"},
{"code":"135","name":"马来西亚语"},
{"code":"136","name":"阿拉伯语"},
{"code":"137","name":"希伯来语"},
{"code":"138","name":"斐济语"},
{"code":"139","name":"毛利语"},
{"code":"140","name":"爪哇语"}
]
},
{
"code": "200",
"name": "练方言",
"cell":
[
{"code":"201","name":"普通话"},
{"code":"202","name":"粤语"},
{"code":"203","name":"闽南话"},
{"code":"204","name":"上海话"},
{"code":"205","name":"四川话"},
{"code":"206","name":"湘语"},
{"code":"207","name":"藏语"},
{"code":"208","name":"蒙古语"}
]
},
{
"code": "300",
"name": "练运动",
"cell":
[
{"code":"301","name":"健美"},
{"code":"302","name":"瑜伽"},
{"code":"303","name":"游泳"},
{"code":"304","name":"桌球"},
{"code":"305","name":"羽毛球"},
{"code":"306","name":"网球"},
{"code":"307","name":"乒乓球"},
{"code":"308","name":"高尔夫球"},
{"code":"309","name":"篮球"},
{"code":"310","name":"足球"},
{"code":"311","name":"排球"},
{"code":"312","name":"沙滩排球"},
{"code":"313","name":"跆拳道"},
{"code":"314","name":"散打"},
{"code":"315","name":"柔术"},
{"code":"316","name":"武术"},
{"code":"317","name":"拳击"},
{"code":"318","name":"射击"},
{"code":"319","name":"击剑"},
{"code":"320","name":"体操"},
{"code":"321","name":"举重"},
{"code":"322","name":"柔道"},
{"code":"323","name":"摔跤"},
{"code":"324","name":"马术"},
{"code":"325","name":"帆船"},
{"code":"326","name":"帆板"},
{"code":"327","name":"滑板"},
{"code":"328","name":"滑雪"},
{"code":"329","name":"单车"},
{"code":"330","name":"曲棍球"},
{"code":"331","name":"手球"},
{"code":"332","name":"棒球"}
]
},
{
"code": "400",
"name": "练乐器",
"cell":
[
{"code":"401","name":"钢琴"},
{"code":"402","name":"小提琴"},
{"code":"403","name":"中提琴"},
{"code":"404","name":"大提琴"},
{"code":"405","name":"二胡"},
{"code":"406","name":"手风琴"},
{"code":"407","name":"管风琴"},
{"code":"408","name":"电子琴"},
{"code":"409","name":"口琴"},
{"code":"410","name":"竖琴族"},
{"code":"411","name":"木琴族"},
{"code":"412","name":"古筝"},
{"code":"413","name":"箫"},
{"code":"414","name":"笙"},
{"code":"415","name":"琵琶"},
{"code":"416","name":"吉他"},
{"code":"417","name":"长笛"},
{"code":"418","name":"短笛"},
{"code":"419","name":"笛类"},
{"code":"420","name":"单簧管族"},
{"code":"421","name":"双簧管族"},
{"code":"422","name":"铜管"},
{"code":"423","name":"萨克斯"},
{"code":"424","name":"小号"},
{"code":"425","name":"大号"},
{"code":"426","name":"长号"},
{"code":"427","name":"圆号"},
{"code":"428","name":"架子鼓"}
]
},
{
"code": "500",
"name": "练唱歌",
"cell":
[
{"code":"501","name":"流行唱法"},
{"code":"502","name":"美声唱法"},
{"code":"503","name":"民族唱法"},
{"code":"504","name":"原生态唱法"}
]
},
{
"code": "600",
"name": "练舞蹈",
"cell":
[
{"code":"601","name":"芭蕾舞"},
{"code":"602","name":"古典舞"},
{"code":"603","name":"民族舞"},
{"code":"604","name":"现代舞"},
{"code":"605","name":"踢踏舞"},
{"code":"606","name":"爵士舞"},
{"code":"607","name":"拉丁舞"},
{"code":"608","name":"摩登舞"},
{"code":"609","name":"街舞"},
{"code":"610","name":"迪斯科"}
]
},
{
"code": "700",
"name": "练棋牌",
"cell":
[
{"code":"701","name":"中国象棋"},
{"code":"702","name":"围棋"},
{"code":"703","name":"国际象棋"},
{"code":"704","name":"斗地主"},
{"code":"705","name":"德州扑克"},
{"code":"706","name":"五子棋"},
{"code":"707","name":"跳棋"},
{"code":"708","name":"国际跳棋"},
{"code":"709","name":"军棋"},
{"code":"710","name":"桥牌"},
{"code":"711","name":"扑克"},
{"code":"712","name":"麻将"}
]
},
{
"code": "800",
"name": "练绘画",
"cell":
[
{"code":"801","name":"中国画"},
{"code":"802","name":"油画 "},
{"code":"803","name":"版画"},
{"code":"804","name":"水彩画"},
{"code":"805","name":"水粉画 "},
{"code":"806","name":"素描"},
{"code":"807","name":"速写"},
{"code":"808","name":"沙画"},
{"code":"809","name":"漫画"}
]
},
{
"code": "900",
"name": "练学习",
"cell":
[
{"code":"910","name":"小学语文"},
{"code":"911","name":"初中语文"},
{"code":"912","name":"高中语文"},
{"code":"913","name":"小学数学"},
{"code":"914","name":"初中数学"},
{"code":"915","name":"高中数学"},
{"code":"916","name":"小学英语"},
{"code":"917","name":"初中英语"},
{"code":"918","name":"高中英语"},
{"code":"919","name":"初中物理"},
{"code":"920","name":"高中物理"},
{"code":"921","name":"初中化学"},
{"code":"922","name":"高中化学"},
{"code":"923","name":"初中生物"},
{"code":"924","name":"高中生物"},
{"code":"925","name":"初中政治"},
{"code":"926","name":"高中政治"},
{"code":"927","name":"初中历史"},
{"code":"928","name":"高中历史"},
{"code":"929","name":"初中地理"},
{"code":"930","name":"高中地理"}
]
},
{
"code": "1100",
"name": "练美食",
"cell":
[
{"code":"1101","name":"中餐"},
{"code":"1102","name":"西餐"},
{"code":"1103","name":"日料"}
]
},
{
"code": "1200",
"name": "练购物",
"cell":
[
{"code":"1201","name":"女装"},
{"code":"1202","name":"男装"},
{"code":"1203","name":"化妆品"},
{"code":"1204","name":"奢侈品"},
{"code":"1205","name":"饰品"},
{"code":"1206","name":"收藏品"}
]
},
{
"code": "1300",
"name": "练帮手",
"cell":
[
{"code":"1301","name":"搬东西"},
{"code":"1302","name":"送东西"},
{"code":"1303","name":"保洁"},
{"code":"1304","name":"买菜做饭"},
{"code":"1305","name":"陪孩子"},
{"code":"1306","name":"陪老人"},
{"code":"1307","name":"陪聊天"}
]
},
{
"code": "1000",
"name": "热门>>",
"cell":
[
{"code":"1001","name":"汽车陪练"},
{"code":"1002","name":"礼仪陪练"},
{"code":"1003","name":"化妆陪练"},
{"code":"1004","name":"游戏陪练"}
]
}
];

//初始化
$(function(){
var object = eval(serviceTypeJson); // 解析JSON对象

var serviceTypes = "<option value=''>请选择</option>";//第一个选择框
var serviceType = "<option value=''>请选择</option>";//第二个选择框

var typesValue = $("#types").val();//获取第一个选择框的value值，回显时用
//遍历解析后的对象-第一个选择框
$(object).each(function(index){
var serviceTypesObject = object[index];//得到第一个选择框对象
if(typesValue == serviceTypesObject.code){//判断，如果等于传过来的value值，就回显，否则，正常展示
serviceTypes += "<option value='"+serviceTypesObject.code+"' selected = 'selected' >"+serviceTypesObject.name+"</option>";
}else{
serviceTypes += "<option value='"+serviceTypesObject.code+"'>"+serviceTypesObject.name+"</option>";
}
});
$("#serviceTypes").append(serviceTypes);//第一个选择框添加内容

var typeValue = $("#type").val();//获取第二个选择框的value值，回显时用
$(object).each(function(index){
var serviceTypesObject = object[index];
if(typesValue == serviceTypesObject.code){//判断第一个选框是否有值，有的话，继续
$(serviceTypesObject.cell).each(function(i){//遍历第二个选框
var serviceTypeObject = serviceTypesObject.cell[i];
if(typeValue == serviceTypeObject.code){//判断，如果等于传过来的value值，就回显，否则，正常展示
serviceType += "<option value='"+serviceTypeObject.code+"' selected = 'selected' >"+serviceTypeObject.name+"</option>";
}else{
serviceType += "<option value='"+serviceTypeObject.code+"'>"+serviceTypeObject.name+"</option>";
}
});
}
});
$("#serviceType").append(serviceType);//第二个选择框添加内容
});

//第一选框改变时调用的函数
function changeTypes(){
//发生改变的时候一空子选框
$("#serviceType").empty();

//解析JSON对象
var object = eval(serviceTypeJson);

//获取第一个选矿的coed及value值
var typesValue = $("#serviceTypes").val();

//定义变量链接第二个选框
var serviceType = "";

$(object).each(function(index){
var serviceTypesObject = object[index];
if(typesValue == serviceTypesObject.code){//判断第一个选框是否有值，有的话，继续
$(serviceTypesObject.cell).each(function(i){//遍历第二个选框
var serviceTypeObject = serviceTypesObject.cell[i];
serviceType += "<option value='"+serviceTypeObject.code+"'>"+serviceTypeObject.name+"</option>";
});
}
});
$("#serviceType").append(serviceType);//第二个选择框添加内容
}

如果此类方法不适合你，那就在搜索下吧。

基于jQuery+JSON 二级联动效果

相关推荐