????：在老師的3級菜單基礎上增加 選擇城市后 使用jquery get方法從服務器獲取城市的介紹并 顯示在下方<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <
在老師的3級菜單基礎上增加 選擇城市后 使用jquery get方法從服務器獲取城市的介紹并 顯示在下方
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三級聯(lián)動菜單</title>
</head>
<body>
省 <select name="" id="pro"></select>
市 <select name="" id="city"></select>
區(qū) <select name="" id="area"></select>
<p id="scenic"></p>
<script src="jquery.min.js"></script>
<script>
$(function(){
$.getJSON('inc/prov.json',function(data){
var option = '<option value="">選擇(省)</option>';
$.each(data,function(i){
option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
});
$('#pro').html(option);
});
$('#pro').change(function(){
//查看當前選擇中元素內(nèi)容
//console.log($(this).find(':selected').text());
$.getJSON('inc/2.json',function(data){
let option = '<option value="">選擇(市)</option>';
$.each(data,function(i){
if (data[i].proId == $('#pro').val()) {
option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
}
});
$('#city').html(option);
});
});
$('#city').change(function(){
//查看當前選擇中元素內(nèi)容
//console.log($(this).find(':selected').text());
$.getJSON('inc/3.json',function(data){
let option = '<option value="">選擇(縣區(qū))</option>';
$.each(data,function(i){
if (data[i].cityId == $('#city').val()) {
option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
}
});
$('#area').html(option);
});
});
$('#area').change(function(){
var v = "inc/"+$("#pro option:selected").val()+"_"+$("#city option:selected").val()+"_"+$("#area option:selected").val()+"_scenic.txt";
//介紹文件名稱
$.get(
v, // 請求的url地址
"", // 請求參數(shù),以對象字面量形式
function (data,status){ // 請求成功的回調(diào)方法
console.log(status); // success
if (status === 'success') {
console.log(data);
$('#area').next().text(data);
} else { //出錯,未拿到響應數(shù)據(jù)
// $('#detail').html('<span style="color:red">請求錯誤</span>');
}
},
'html' // 響應數(shù)據(jù)的格式,html/json/xml可省,會自動判斷
);
});
//思考: 如何將獲取到的內(nèi)容,及時的回顯到頁面中,動態(tài)的提示用戶當前的選擇內(nèi)容,實現(xiàn)數(shù)據(jù)綁定
})
</script>
</body>
</html>
?? ???：天蓬老師?? ??：2019-01-27 09:08:54
???? ??：三級聯(lián)動, 用處非常之多, 其實可以有許多第三方插件可以用的, 但是了解其原生是怎么寫的. 還是很有必要的