简单易懂的jquery版三级联动select
来源:互联网 发布:装载xml数据方法异常 编辑:程序博客网 时间:2024/05/22 03:38
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":"迁西县"} ]} ]}]
各位最好自己封装成插件,方便调用
0 0
- 简单易懂的jquery版三级联动select
- 简单易懂的jquery版三级联动select
- 简单易懂的jquery版三级联动select
- 简单易懂的jquery版三级联动select
- 简单jquery实现select三级联动
- jQuery实现select三级联动
- 【Vegas原创】PHP+jquery实现select的三级联动
- 【Vegas原创】PHP+jquery实现select的三级联动
- 简单的三级联动
- 简单的三级联动
- jquery填充select下拉列表,三级联动
- 简单的实现三级联动
- select三级联动结合jquery的chosen.jquery.js 插件一起使用原创案例
- javascript三级联动select
- javascript三级联动select
- angularjs select 三级联动
- select三级联动
- jQuery select表单提交省市区城市三级联动
- 关于IPhone 手机适配问题
- AngularJs服务
- Java中的23种设计模式
- dia在linux中无法输入中文
- java获取客户端请求IP地址 获取公网ip
- 简单易懂的jquery版三级联动select
- 二叉树的镜像
- 字符串,switch
- 解决eclipse快捷方式无法启动
- crtmpserver 启动初始化(写的比较详细)
- MPLS调试笔记之四脚本实现
- 栈的压入 弹出序列
- CentOS 6 下安装Matlab教程
- centos 6.3下安装Hadoop 2.7.1并配置伪分布式集群