<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.1.min.js"></script>
<style>
select{
width:100px;
}
</style>
</head>
<body>
省：
<select name="" id="sheng">
<option value="">请选择</option>
</select>
市：
<select name="" id="shi" disabled="disabled">
<option value="">请选择</option>
</select>
区：
<select name="" id="qu" disabled="disabled">
<option value="">请选择</option>
</select>
<script type="text/javascript">
//省
$.getJSON("data/local_P.json",function(date){
date.forEach(function(item){
var pOption = "<option value='"+item.id+"'>"+item.nameP+"</option>";
$("#sheng").append(pOption);
});
});
//市
$("#sheng").change(function(){
$("#shi").attr("disabled",false);
$("#shi").children(":not(:first)").remove();
$("#qu").children(":not(:first)").remove();
$.getJSON("data/local_S.json",function(date){
var pId = $("#sheng").val();
date.forEach(function(item){
if(item.p_id == pId){
var sOption = "<option value='"+item.s_id+"'>"+item.nameS+"</option>";
$("#shi").append(sOption);
}
});
});
});
//区
$("#shi").change(function(){
$("#qu").attr("disabled",false);
$("#qu").children(":not(:first)").remove();
$.getJSON("data/local_q.json",function(date){
console.log(date);
var sId = $("#shi").val();
date.forEach(function(item){
if(item.s_id == sId){
var qOption = "<option value='"+item.id_q+"'>"+item.nameq+"</option>";
$("#qu").append(qOption);
}
});
});
});
</script>
</body>
</html>
数据为模拟数据，注意模拟的json数据每一项都要加双引号，否则 $.getJson()获取不到数据,json数据如下；
local_P.json：
[{
"id":"1001",
"nameP":"江苏"
},{
"id":"1002",
"nameP":"浙江"
}]
local_S.json：
[{
"p_id":"1001",
"s_id":"101",
"nameS":"苏州"
},{
"p_id":"1001",
"s_id":"102",
"nameS":"南通"
},{
"p_id":"1002",
"s_id":"201",
"nameS":"金华"
},{
"p_id":"1002",
"s_id":"202",
"nameS":"杭州"
}]
local_q.json：
[{
"s_id":"102",
"id_q":"10201",
"nameq":"如皋"
},{
"s_id":"102",
"id_q":"10202",
"nameq":"海门"
},{
"s_id":"101",
"id_q":"10203",
"nameq":"吴中"
},{
"s_id":"101",
"id_q":"10204",
"nameq":"高新区"
},{
"s_id":"201",
"id_q":"20203",
"nameq":"金东"
},{
"s_id":"201",
"id_q":"20204",
"nameq":"义乌"
},{
"s_id":"202",
"id_q":"20201",
"nameq":"杭州下属市1"
},{
"s_id":"202",
"id_q":"20202",
"nameq":"杭州下属市2"
}]