主要功能：实现省市区三级联动（选择省之后，然后可以选择相应的市，最后可以选择相应的区）
主要技术：JQuery，js ，html
主要代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市区三级级联</title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script type="text/javascript" src="js/cityjson.js"></script>
<script type="text/javascript">
//JQuery入口函数
$(function(){
//1.得出省的名称
$.each(data,function(index,item){
//console.log(item,name);
$("#province").append("<option value="+index+">"+item.name+"</option>");
});
//2.根据省，得出相应市的名称
$("#province").bind("change",function(){
//清空上一次得到的值
$("#city").empty();
//清空之后，开始的选择提示一并会被清除，再次添加
$("city").append("<option>请选择</option>");
//获取省的值
var index_pro=$("#province").val();
$.each(data[index_pro].child,function(index,item){
$("#city").append("<option value="+index+">"+item.name+"</option>");
});
})
//3.根据省、市，获取相应区的名称
$("#city").bind("change",function(){
$("#region").empty();
$("#region").append("<option>请选择</option>");
var index_pro=$("#province").val();
var index_city=$("#city").val();
$.each(data[index_pro].child[index_city].child, function(index,item) {
$("#region").append("<option value="+index+">"+item+"</option>");
});
})
})
</script>
</head>
<body>
省：<select id="province"><option >请选择</option></select>
市：<select id="city"><option >请选择</option></select>
区：<select id="region"><option >请选择</option></select>
</body>
</html>