省、市、区、下拉选

最基本的方式【小程序可用】

1. 引入 getCity.js ： 在js里面用JSON、和数组， 把数据信息保存起来（代码在下面）。
   链接：https://pan.baidu.com/s/12yt0KP4dEp6JVExWWvQlRg
   提取码：t4hw

2. H5页面调用

    <script src="./js/getCity.js" type="text/javascript" charset="utf-8"></script>
    	<script>
			$(function() {
				var getProvince = ChinaCity.getProvince()
				var getProvince_val = ""
				var getCity_val = ""
				
				// 获取省份，
				$.each(getProvince, function(index, item) {
					$("#proclass_hd").append("<option value=" + item + ">" + item + "</option>")
				});
				
				// 获取市，
				$("#proclass_hd").change(function(e) {
					$("#proclass_hd1").empty()
					getProvince_val = $(this).val()
					var getCity = ChinaCity.getCity(getProvince_val)
					$.each(getCity, function(index, item) {
						$("#proclass_hd1").append("<option value=" + item + ">" + item + "</option>")
					});
				})
				// 获取区县，
				//	$("#proclass_hd1").change(function(e) {
				//		getCity_val = $(this).val()
				//		var getArea = ChinaCity.getArea(getProvince_val, getCity_val)
				//		
				//		$.each(getArea, function(index, item) {
				//		$("#proclass_hd2").append("<option value=" + item + ">" + item + "</option>")
				//		   });
				//		})
				//		$("#proclass_hd2").change(function(e) {
				//		getArea_val = $(this).val()
				//		})
			})

getCity.js 代码

(function() {
   //收录了中国的省市区县数据

   var cityStr = [

   	{
   		"name": "北京市",
   		"city": [{
   			"name": "北京市",
   			"area": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "平谷区", "怀柔区", "密云县", "延庆县"]
   		}]
   	},
   // 其他省略.............,全部请到网盘下载
   ];


   function getProvince() {
   	var provinceNames = [];
   	for(var i = 0; i < cityStr.length; i++) {
   		provinceNames.push(cityStr[i].name);
   	}
   	return provinceNames;
   }

   function getCity(province) {
   	var cityNames = [];
   	var cities, i, j;
   	for(i = 0; i < cityStr.length; i++) {
   		if(province === cityStr[i].name) {
   			cities = cityStr[i].city;
   			for(j = 0; j < cities.length; j++) {
   				cityNames.push(cities[j].name);
   			}
   			break;
   		}
   	}
   	return cityNames;
   }

   function getArea(province, city) {
   	var areaNames = [];
   	var cities, i, j;
   	for(i = 0; i < cityStr.length; i++) {
   		if(province === cityStr[i].name) {
   			cities = cityStr[i].city;
   			for(j = 0; j < cities.length; j++) {
   				if(city === cities[j].name) {
   					areaNames = cities[j].area;
   					break;
   				}
   			}
   			break;
   		}
   	}
   	return areaNames;
   }
   var ChinaCity = {};
   ChinaCity.getProvince = getProvince;
   ChinaCity.getCity = getCity;
   ChinaCity.getArea = getArea;

   window.ChinaCity = ChinaCity;

})();

function aa() {
   alert("aa")
}

使用插件 layui （借鉴大神博客）

https://blog.csdn.net/qq_29463709/article/details/82626632