省市区三级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>城市三级联动</title>
</head>
<body>
请选择省:<select class="set">
</select>
请选择市:<select class="set1"></select>
请选择区:<select class="set2"></select>
</body>
</html>
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript">
$(function(){
$.getJSON('Josn/1.json',function(data){
var option = '<option value="">请选择</option>';
$.each(data,function(i){
option+= '<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
});
$(".set").html(option);
});//省
$(".set").change(function(){
$.getJSON('Josn/2.json',function(data){
var option = '<option value="">请选择</option>';
$.each(data,function(i){
if (data[i].proId == $(".set").val()) {
option+= '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
}
});
$(".set1").html(option);
})
})//市
$(".set1").change(function(){
$.getJSON('Josn/3.json',function(data){
var option = '<option value="">请选择</option>';
$.each(data,function(i){
if (data[i].areaId == $(".set1").val()) {
option+= '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
}
});
$(".set2").html(option);
})
})//区
})
</script>
