主要功能:实现省市区三级联动(选择省之后,然后可以选择相应的市,最后可以选择相应的区)
主要技术: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>