jquery实现多级联动
来源:互联网 发布:php新闻发布系统 编辑:程序博客网 时间:2024/05/17 23:56
我们在开发中,经常会遇到控件选择联动的情况,最常见的莫过于省市县了,当然还有其它不同层级的联动。好了,下面开始进行多久联动了。
详细代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML"><html> <head> <base href="<%=basePath%>"> <title>三级联动</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="select,三级,联动"><meta http-equiv="description" content="这是一个三级联动"><title>selectList</title><style type="text/css"> .selectList{width:500px;margin:50px auto;}</style><script type="text/javascript" src="static/js/jquery-1.9.1.min.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> <script type="text/javascript"> $(function(){ $(".selectList").each(function(){ var url = "static/json/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数据如下:
[ {"p":"ALL", "c":[ {"ct":"ALL", "d":[ {"dt":"ALL"} ]} ]}, {"p":"江西省", "c":[{"ct":"ALL", "d":[ {"dt":"ALL"} ]}, {"ct":"南昌市", "d":[ {"dt":"ALL"}, {"dt":"西湖区"}, {"dt":"东湖区"}, {"dt":"高新区"} ]}, {"ct":"赣州市", "d":[ {"dt":"ALL"}, {"dt":"瑞金县"}, {"dt":"南丰县"}, {"dt":"全南县"} ]} ]}, {"p":"北京", "c":[ {"ct":"ALL"}, {"ct":"东城区"}, {"ct":"西城区"} ]}, {"p":"河北省", "c":[{"ct":"ALL", "d":[ {"dt":"ALL"} ]}, {"ct":"石家庄", "d":[ {"dt":"ALL"}, {"dt":"长安区"}, {"dt":"桥东区"}, {"dt":"桥西区"} ]}, {"ct":"唐山市", "d":[ {"dt":"ALL"}, {"dt":"滦南县"}, {"dt":"乐亭县"}, {"dt":"迁西县"} ]} ]}]
当然实际开发中你会从数据库或其他文件中读取源数据,这样你只需要把读取的数据拼写成这种格式的json数据,就Ok了。
阅读全文
0 0
- jQuery 实现多级联动
- Jquery实现多级联动
- jquery实现多级联动
- jQuery多级联动多选框
- Jquery 多级联动
- Jquery多级联动Demo
- ajax 实现多级联动。
- EasyUI实现多级联动
- ajax 实现多级联动
- jquery ajax 多级select 菜单联动加载实现
- jquery 无刷新多级联动
- ICallbackEventHandler接口实现多级联动
- Ajax实现多级联动菜单
- Ajax实现多级联动菜单
- 多级目录联动效果实现
- 【jQuery】jQuery多级联动插件 - Chained
- jquery+xml+ajax 省市多级联动
- jQuery cxSelect 多级联动下拉菜单
- python2.x和python3.x区别
- WebView的简单使用
- LintCode 两数之和
- 类对象切割对虚函数调用的影响
- 最小生成树-Prim算法和Kruskal算法
- jquery实现多级联动
- 一道sql面试题吧
- 生产者消费者模型
- 读者-写者问题(Reader-Writer Problem)
- 树莓派 Raspberry Pi 启用 root 登陆账户
- 设计模式再探索
- aop日志持久化+配置说明+aop持久化配置+aop重写测试+手动重写测试
- 单向链表创建与遍历
- JUC(Lock)和Monitor Object(Synchronized)机制区别是什么