axjx与jquery三级联动

原创2019-01-16 15:42:5187
摘要:<html lang="en">    <head>    <meta charset="UTF-8">    <title>作业提示:  三级联动菜单</title>    </head> &nb

<html lang="en">    

<head>    

<meta charset="UTF-8">    

<title>作业提示:  三级联动菜单</title>    

</head>    

<body>    

省 <select name="" id="pro"></select>    

市 <select name="" id="city"></select>    

区 <select name="" id="area"></select>    

<p id="addr"></p>    

<script src="../lib/jquery.js"></script>    

<script>    

$(function(){    

$.getJSON('inc/1.json',function(data){    

let option = '<option value="">选择(省)</option>';    

$.each(data,function(i){    

option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>';    

});    

$('#pro').html(option);    


});    


$('#pro').change(function(){    

//查看当前选择中元素内容    

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(){    

//查看当前选择中元素内容    

console.log($(this).find(':selected').text());    

$.getJSON('inc/3.json',function(data){    

let option = '<option value="">选择(县区)</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(){    

//查看当前选择中元素内容    

console.log($(this).find(':selected').text());    

});    


//思考: 如何将获取到的内容,及时的回显到页面中,动态的提示用户当前的选择内容,实现数据绑定    

})    

</script>    

</body>    

</html>    


批改老师:灭绝师太批改时间:2019-01-16 15:45:30
老师总结:难道非要我把你的作业打回去,你才会发现问题么?这样看视频意义何在?学到东西了么?就不说你的作业有没有按时按量完成,你这样也太敷衍了吧?你的每一个作业老师都有认真看,也提示很多次作业不符合标准,怕耽误你进度,所以一直比较宽松,你这不是在浪费我感情么??

发布手记

热门词条