1.使用jquery框架简化ajax请求，懒的写XMLHttpRequest源生js
2.实现为二级Object，见city.json文件
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,
minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<script src="lib/jquery-2.1.4.min.js"></script>
<title>ES5CMP</title>
</head>
<body>
<div>
市: <select name="a" id="a"></select>
</div>
<div>
区: <select name="b" id="b"></select>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
var cityList;
$.ajax({
url:"city.json",
type:"get"
}).success(function(data){
cityList=data;
$("#a").append("<option></option>");
$("#b").append("<option></option>");
for(var i= 0,j=cityList.length;i<j;i++){
$("#a").append("<option>"+cityList[i].city+"</option>");
}
$("#a").change(function(e){
var changgedCity=this.value;
$("#b").empty();
$("#b").append("<option></option>");
for(var i= 0,j=cityList.length;i<j;i++){
if(cityList[i].city==changgedCity){
for(var m= 0,n=cityList[i].country.length;m<n;m++){
$("#b").append("<option>"+cityList[i].country[m].name+"</option>");
}
}
}
});
})
});
</script>
</html>
city.json:
[
{
"city":"beijing",
"country":[
{
"name":"haidian"
},
{
"name":"chaoyang"
}
]
},
{
"city":"shanghai",
"country":[
{
"name":"pudong"
},
{
"name":"xuhui"
},
{
"name":"jingan"
}
]
}
]
全国的city.json库需要完善，三级联动的“省-市-县”需要多添加一层循环，city.json也需要按照解构添加
原文：http://www.cnblogs.com/carlyin/p/5803228.html