您的位置:首页 > Web前端 > JQuery

基于jQuery+JSON 二级联动效果

2015-05-08 23:47 375 查看
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>

<!-- jquery.1.7.2-min.js这个是jQuery主要文件,不在细讲 -->

<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);//第二个选择框添加内容

}

如果此类方法不适合你,那就在搜索下吧。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: