abstrait：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>城市三級(jí)聯(lián)動(dòng)</title></head><body> 請(qǐng)選擇省:<select class="set"> </select&
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>城市三級(jí)聯(lián)動(dòng)</title>
</head>
<body>
請(qǐng)選擇省:<select class="set">
</select>
請(qǐng)選擇市:<select class="set1"></select>
請(qǐng)選擇區(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="">請(qǐng)選擇</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="">請(qǐng)選擇</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="">請(qǐng)選擇</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>
Professeur correcteur：天蓬老師Temps de correction：2019-02-18 11:36:39
Résumé du professeur：這個(gè)案例的重點(diǎn)在于onchange事件,與異步的獲取json數(shù)據(jù)