<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select id="province" onchange="provinceSelect(this);"></select> <select id="city" onchange="citySelect(this);"></select> <select id="region"></select> </body> <script src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> var list1 = new Array(2); list1["湖北省"] = ["武汉市", "襄阳市"]; list1["湖南省"] = ["长沙市", "株洲市"]; list1["湖北省"]["武汉市"] = ["洪山区", "江夏区", "武昌区", "汉口区"]; list1["湖北省"]["襄阳市"] = ["樊城区", "襄城区"]; list1["湖南省"]["长沙市"] = ["芙蓉区", "天心区"]; list1["湖南省"]["株洲市"] = ["天元区", "芦淞区"]; $(function() { var pp = '<option value="请选择省份">请选择省份</option>'; $("#province").append(pp); for(var l in list1) { $("#province").append('<option value="' + l + '">' + l + '</option>'); } }); function provinceSelect(p) { //清空城市和区域 $("#city").empty(); $("#region").empty(); var pp = '<option value="请选择城市">请选择城市</option>'; $("#city").append(pp); //获取省份名称 var pp = $(p).val(); //根据省份名称 遍历二维数组 for(var i = 0; i < list1[pp].length; i++) { $("#city").append('<option value="' + list1[pp][i] + '">' + list1[pp][i] + '</option>'); } } function citySelect(c) { //清空区域 $("#region").empty(); var pp = '<option value="请选择区县">请选择区县</option>'; $("#region").append(pp); //获取省份 var pp = $("#province").val(); //获取城市 var cc = $(c).val(); ////根据省份和城市名称 遍历三维数组 for(var i = 0; i < list1[pp][cc].length; i++) { $("#region").append('<option value="' + list1[pp][cc][i] + '">' + list1[pp][cc][i] + '</option>'); } } </script> </html>
jquery编写简单三级联动
猜你喜欢
转载自blog.csdn.net/viczking/article/details/80528635
今日推荐
周排行