<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(function(){
$.ajax({
url:"diqu.json",
async:true,
dataType:"json",
type:"post",
success:function(data){
for(var i=0;i<data.length;i++){
$(".sheng").append("<option value='"+data[i].name+"' class='"+i+"'>"+data[i].name+"</option>");
$(".sheng").on("click","option",function(){
var i=$(this).attr("class");
$(".shi").html("");
var shi=data[i].city;
for(var j=0;j<shi.length;j++){
$(".shi").append("<option value='"+shi[j].name+"' class='"+j+"'>"+shi[j].name+"</option>");
$(".shi").on("click","option",function(){
var j=$(this).attr("class");
$(".xian").html("");
var xian=shi[j].area;
for(var s=0;s<xian.length;s++){
$(".xian").append("<option value='"+xian[s]+"'>"+xian[s]+"</option>");
}
})
}
})
}
}
})
})
</script>
</head>
<body>
<div id="show">
省：<select class="sheng"><option value="请选择">请选择</option></select>
市：<select class="shi"><option value="请选择">请选择</option></select>
县或区：<select class="xian"><option value="请选择">请选择</option></select>
</div>
</body>
</html>
