简单易懂的jquery版三级联动select
2015-09-28 10:57
766 查看
html和js部分
json文件(area.json),这里只是事例,根据情况添加或编写
各位最好自己封装成插件,方便调用
<!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 .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 .d) == "undefined"){ oDistrict.css("display","none"); }else{ oDistrict.css("display","inline"); $.each(areaJson[m].c .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":"迁西县"} ]} ]} ]
各位最好自己封装成插件,方便调用
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作
- jQuery实现复选框批量选择与反选的方法
- jQuery中的常用事件总结