利用jquery实现户籍地选择下拉框
利用jquery实现户籍地选择下拉框
data.js
var data = [{provname: '浙江省',provId: 1,citys: [{cityname: "杭州市",cityId: 101,areas: [{areaname: "杭州一区",areaId: 1011},{areaname: "杭州二区",areaId: 1012}]}, {cityname: "温州市",cityId: 102,areas: [{areaname: '温州一区',areaId: 1021}, {areaname: '温州二区',areaId: 1022}]}, {cityname: "宁波市",cityId: 103,areas: [{areaname: '宁波一区',areaId: 1031}, {areaname: '宁波二区',areaId: 1032}]}, {cityname: "绍兴市",cityId: 104,areas: [{areaname: '绍兴一区',areaId: 1041}, {areaname: '绍兴二区',areaId: 1042}]}]}, {provname: '山东省',provId: 2,citys: [{cityname: "济南市",cityId: 201,areas: [{areaname: "济南一区",areaId: 2011},{areaname: "济南二区",areaId: 2012}]}, {cityname: "青岛市",cityId: 202,areas: [{areaname: '青岛一区',areaId: 2021}, {areaname: '青岛二区',areaId: 2022}]}, {cityname: "济宁市",cityId: 203,areas: [{areaname: '济宁一区',areaId: 2031}, {areaname: '济宁二区',areaId: 2032}]}, {cityname: "潍坊市",cityId: 204,areas: [{areaname: '潍坊一区',areaId: 2041}, {areaname: '潍坊二区',areaId: 2042}]}]},{provname: '广东省',provId: 3,citys: [{cityname: "广州市",cityId: 301,areas: [{areaname: "广州一区",areaId: 3011},{areaname: "广州二区",areaId: 3012}]}, {cityname: "潮阳市",cityId: 302,areas: [{areaname: '潮阳一区',areaId: 3021}, {areaname: '潮阳二区',areaId: 3022}]}, {cityname: "澄海市",cityId: 303,areas: [{areaname: '澄海一区',areaId: 3031}, {areaname: '澄海二区',areaId: 3032}]}, {cityname: "潮州市",cityId: 304,areas: [{areaname: '潮州一区',areaId: 3041}, {areaname: '潮州二区',areaId: 3042}]}]},{provname: '甘肃省',provId: 4,citys: [{cityname: "兰州市",cityId: 401,areas: [{areaname: "兰州一区",areaId: 4011},{areaname: "兰州二区",areaId: 4012}]}, {cityname: "白银市",cityId: 402,areas: [{areaname: '白银一区',areaId: 4021}, {areaname: '白银二区',areaId: 4022}]}, {cityname: "敦煌市",cityId: 403,areas: [{areaname: '敦煌一区',areaId: 4031}, {areaname: '敦煌二区',areaId: 4032}]}, {cityname: "定西市",cityId: 404,areas: [{areaname: '定西一区',areaId: 4041}, {areaname: '定西二区',areaId: 4042}]}]}
]
demo.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/jquery.min.js"></script><script src="js/data.js"></script>
</head>
<body><!-- 先添加三个下拉列表 --><select name="prov" id="prov"></select><select name="city" id="city"></select><select name="area" id="area"></select><script>var $prov=$("#prov")var $city=$("#city")var $area=$("#area")$(function(){//页面加载完成后触发$.each(data,function(i,e){$prov.append('e.provId+'">'+e.provname+'') //在$obj的末尾追加子元素newObj})$prov.prepend('');//当省名被选择时，触发以下事件$prov.on("change",function(){//遍历省$.each(data,function(i,e){if($prov.val()==e.provId){ //遍历市$city.html('');//用来清空之前选择的市$.each(e.citys,function(i,e2){$city.append('e2.cityId+'">'+e2.cityname+'');})}})})//当市名被选择时，触发以下事件$city.on("change",function(){//遍历省$.each(data,function(i,e){if($prov.val()==e.provId){$.each(e.citys,function(i,e2){if($city.val()==e2.cityId){$area.html('');$.each(e2.areas,function(i,e3){$area.append('e3.areaId+'">'+e3.areaname+'');})}})}})})})</script>
</body>
</html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！