abstract：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>城市三級聯(lián)動</title></head><body> 請選擇省:<select class="set"> </select&
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>城市三級聯(lián)動</title>
</head>
<body>
請選擇省:<select class="set">
</select>
請選擇市:<select class="set1"></select>
請選擇區(qū):<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);
})
})//區(qū)
})
</script>
Correcting teacher：天蓬老師Correction time：2019-02-18 11:36:39
Teacher's summary：這個案例的重點在于onchange事件,與異步的獲取json數(shù)據(jù)