html和js部分
<!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>
json文件（area.json），这里只是事例，根据情况添加或编写
[ {"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":"迁西县"} ]} ]} ]
各位最好自己封装成插件，方便调用