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);//第二个选择框添加内容 }
如果此类方法不适合你,那就在搜索下吧。 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|