jquery版三级联动select
Posted ╭(╯3╰)╮尝尝鲜
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery版三级联动select相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset=gbk /> <title>selectList</title> <style type="text/css"> *{margin:0;padding:0;} .selectList{width:200px;margin:50px auto;} </style> <script type="text/javascript" src="jquery1.7.1.js"></script> </head> <body> <div class="selectList"> <select class="province"> <option>请选择</option> </select> <select class="city"> <option>请选择</option> </select> <select class="district"> <option>请选择</option> </select> </div> <div class="selectList"> <select class="province"> <option>请选择</option> </select> <select class="city"> <option>请选择</option> </select> <select class="district"> <option>请选择</option> </select> </div> <script type="text/javascript"> $(function(){ $(".selectList").each(function(){ var url = "area.json"; var areaJson; var temp_html; var oProvince = $(this).find(".province"); var oCity = $(this).find(".city"); var oDistrict = $(this).find(".district"); //初始化省 var province = function(){ $.each(areaJson,function(i,province){ temp_html+="<option value=‘"+province.p+"‘>"+province.p+"</option>"; }); oProvince.html(temp_html); city(); }; //赋值市 var city = function(){ temp_html = ""; var n = oProvince.get(0).selectedIndex; $.each(areaJson[n].c,function(i,city){ temp_html+="<option value=‘"+city.ct+"‘>"+city.ct+"</option>"; }); oCity.html(temp_html); district(); }; //赋值县 var district = function(){ temp_html = ""; var m = oProvince.get(0).selectedIndex; var n = oCity.get(0).selectedIndex; if(typeof(areaJson[m].c[n].d) == "undefined"){ oDistrict.css("display","none"); }else{ oDistrict.css("display","inline"); $.each(areaJson[m].c[n].d,function(i,district){ temp_html+="<option value=‘"+district.dt+"‘>"+district.dt+"</option>"; }); oDistrict.html(temp_html); }; }; //选择省改变市 oProvince.change(function(){ city(); }); //选择市改变县 oCity.change(function(){ district(); }); //获取json数据 $.getJSON(url,function(data){ areaJson = data; province(); }); }); }); </script> </body> </html>
[
{"p":"江西省",
"c":[
{"ct":"南昌市",
"d":[
{"dt":"西湖区"},
{"dt":"东湖区"},
{"dt":"高新区"}
]},
{"ct":"赣州市",
"d":[
{"dt":"瑞金县"},
{"dt":"南丰县"},
{"dt":"全南县"}
]}
]},
{"p":"北京",
"c":[
{"ct":"东城区"},
{"ct":"西城区"}
]},
{"p":"河北省",
"c":[
{"ct":"石家庄",
"d":[
{"dt":"长安区"},
{"dt":"桥东区"},
{"dt":"桥西区"}
]},
{"ct":"唐山市",
"d":[
{"dt":"滦南县"},
{"dt":"乐亭县"},
{"dt":"迁西县"}
]}
]}
]
以上是关于jquery版三级联动select的主要内容，如果未能解决你的问题，请参考以下文章