摘要:在老师的3级菜单基础上增加 选择城市后 使用jquery get方法从服务器获取城市的介绍并 显示在下方<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <
在老师的3级菜单基础上增加 选择城市后 使用jquery get方法从服务器获取城市的介绍并 显示在下方
<!DOCTYPE html> <html> <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="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(){ //查看当前选择中元素内容 //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(){ var v = "inc/"+$("#pro option:selected").val()+"_"+$("#city option:selected").val()+"_"+$("#area option:selected").val()+"_scenic.txt"; //介绍文件名称 $.get( v, // 请求的url地址 "", // 请求参数,以对象字面量形式 function (data,status){ // 请求成功的回调方法 console.log(status); // success if (status === 'success') { console.log(data); $('#area').next().text(data); } else { //出错,未拿到响应数据 // $('#detail').html('<span style="color:red">请求错误</span>'); } }, 'html' // 响应数据的格式,html/json/xml可省,会自动判断 ); }); //思考: 如何将获取到的内容,及时的回显到页面中,动态的提示用户当前的选择内容,实现数据绑定 }) </script> </body> </html>
批改老师:天蓬老师批改时间:2019-01-27 09:08:54
老师总结:三级联动, 用处非常之多, 其实可以有许多第三方插件可以用的, 但是了解其原生是怎么写的. 还是很有必要的