用jquery实现三级联动
2017-08-25 22:43
513 查看
效果
1、页面加载是需要有选择省份
2、编写省份下拉框change事件
3、编写城市区域下拉框change事件
4、省市的下拉框更改时要将后面的下拉框清空
实现代码
1、页面加载是需要有选择省份
2、编写省份下拉框change事件
3、编写城市区域下拉框change事件
4、省市的下拉框更改时要将后面的下拉框清空
实现代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三级联动</title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> //创建三维数组 var lists = new Array(2); lists["湖北省"] = ["武汉市","天门市"]; lists["湖北省"]["武汉市"] =["江夏区","洪山区","青山区","黄陂区"]; lists["湖北省"]["天门市"] = ["竟陵街道","九真镇","渔薪镇","皂市镇"]; lists["湖南省"] =["长沙市","韶山市"]; lists["湖南省"]["长沙市"] = ["芙蓉区","天心区","岳麓区","开福区"]; lists["湖南省"]["韶山市"] =["清溪镇","银田镇","如意镇"]; //创建$工厂函数用来制作省份的下拉框 $(function(){ //创建一个节点用pp接收 var pp='<option value="请选择省份">请选择省份</option>'; //将节点加到id为province的下拉框里 $("#province").append(pp); //遍历省份并将省份放到下拉框里 for (var provinceMe in lists){ //将省份放到下拉框里 $("#province").append('<option value='+provinceMe+'>'+provinceMe+'</option>'); } }) //制作城市的下拉列表框 function provinceSelect(cc){ //当选择省份的时候清空城市和区域 $("#city").empty(); $("#region").empty(); //创建节点用cityMe接受 var cityMe = '<option value="请选择城市">请选择城市</option>'; // 将节点放到城市下拉框里 $("#city").append(cityMe); //获取省份名称 var provinceMe = $(cc).val(); //遍历省份将城市放进去 for (var i=0;i<lists[provinceMe].length;i++){ //将城市放到下拉框里 $("#city").append('<option value='+lists[provinceMe][i]+'>'+lists[provinceMe][i]+'</option>'); } } //制作区域的下拉框 function citySelect(region){ //选择城市时清空区域的节点 $("#region").empty(); //创建节点用regionMe接收 var regionMe = '<option value="请选择区域">请选择区域</option>'; //将节点放到区域下拉框里 $("#region").append(regionMe); //获取省份名称 var provinceHe =$("#province").val(); //获取城市名称 var cityHe =$(region).val(); //遍历循环 for (var i =0;i<lists[provinceHe][cityHe].length;i++){ $("#region").append('<option value='+lists[provinceHe][cityHe][i]+'>'+lists[provinceHe][cityHe][i]+'</option>'); } } </script> </head> <body> <select id="province" onchange="provinceSelect(this);"></select> <select id="city" onchange="citySelect(this);"></select> <select id="region"></select> </body> </html>
相关文章推荐
- JQuery/JS实现的三级联动选择
- jQuery实现的省市县三级联动菜单效果完整实例
- jquery读取xml文件实现省市县三级联动的方法
- ASP.NET MVC + Jquery 实现Ajax下拉框数据三级联动
- 使用jquery 匿名内部类实现 下拉列表三级联动
- 【JQuery】使用JQuery实现城市两级或三级联动(下拉菜单)
- jQuery实现三级联动
- spring/struts/hibernate+jquery实现三级联动
- jQuery使用EasyUi实现三级联动下拉框效果
- jQuery + json 实现省市区三级联动
- JQuery实现省市区三级联动
- jQuery解析xml文件,使用get方法实现省市县三级联动下拉框
- Jquery+XML实现三级联动
- jQuery实现三级联动
- 省市区三级联动jquery实现代码
- 用jQuery实现省市区三级联动(可做插件)
- Hibernate+struts+JqueryAjax+jSON实现无刷新三级联动
- 使用JQUERY实现JSON数据三级联动
- jQuery实现省市县三级联动菜单
- asp.net 使用jquery 和ajax 实现三级联动