jquery+ajax实现省市区三级联动效果简单示例
本文实例讲述了jquery+ajax实现省市区三级联动效果。分享给大家供大家参考，具体如下：
一直想学习下Ajax,没时间,汗,这借口太牵强了.下了点教程在手机里,翻了好几遍了,没实战一次.
最近的项目里需要Ajax实现效果,就下了个jquery,然后找了个实例,学习了一下,幡然醒悟,NND,jquery果然强大的一塌糊涂,实现Ajax简直就是不费吹灰之力.下面把学习过程跟大家分享下,虽然还没有搞清楚jqueryajax的底层相关.不管了.我们不需要去发明轮子.呵呵.
先上代码,是一个省市区三级联动的ajax效果:
<selectname='sheng'onchange='JavaScript:areas_load(this.value);'class="selectclass">
<optionvalue='0'>请选择省份</option><optionvalue='13'>A-安徽</option>
<optionvalue='33'>A-澳门</option><optionvalue='1'>B-北京</option>
<optionvalue='4'>C-重庆</option><optionvalue='14'>F-福建</option>
<optionvalue='21'>G-广西</option><optionvalue='20'>G-广东</option>
<optionvalue='28'>G-甘肃</option><optionvalue='24'>G-贵州</option>
<optionvalue='22'>H-海南</option><optionvalue='18'>H-湖北</option>
<optionvalue='17'>H-河南</option><optionvalue='19'>H-湖南</option>
<optionvalue='5'>H-河北</option><optionvalue='10'>H-黑龙江</option>
<optionvalue='15'>J-江西</option><optionvalue='11'>J-江苏</option>
<optionvalue='9'>J-吉林</option><optionvalue='8'>L-辽宁</option>
<optionvalue='30'>N-宁夏</option><optionvalue='7'>N-内蒙古</option>
<optionvalue='29'>Q-青海</option><optionvalue='6'>S-山西</option>
<optionvalue='23'>S-四川</option><optionvalue='2'>S-上海</option>
<optionvalue='16'>S-山东</option><optionvalue='27'>S-陕西</option>
<optionvalue='3'>T-天津</option><optionvalue='34'>T-台湾</option>
<optionvalue='26'>X-西藏</option><optionvalue='31'>X-新疆</option>
<optionvalue='32'>X-香港</option><optionvalue='25'>Y-云南</option>
<optionvalue='12'>Z-浙江</option>
</select>
<SELECTNAME="shi"id="shi"class="selectclass"onchange="JavaScript:area_load(this.value);">
<optionvalue=''>请选择地级市</option>
</SELECT>
<SELECTNAME="xian"id="xian"class="selectclass">
<optionvalue=''>请选择县级市</option>
</SELECT>
<scriptlanguage="javascript">
functionareas_load(id)
{
$.get("/ajax/areaajax.php",{areaid:id},
function(data){
$('#shi').html('<optionvalue="">请选择地级市</option>');
$('#xian').html('<optionvalue="">请选择县级市</option>');
if(id!=0)$('#shi').append(data);
});
}
functionarea_load(id)
{
$.get("/ajax/areaajax.php",{areaid:id},
function(data){
$('#xian').html('<optionvalue="">请选择县级市</option>');
if(id!=0)$('#xian').append(data);
});
}
</script>
代码有些拙劣,大家见谅,下面说下这段代码的工作流程.
首先是页面中加载了jquery的js库文件,这个不用多说吧.他是ajax效果赖以实现的必不可少的环节.
当下拉框被选中,触发了onchange事件,该事件请求了一个函数areas_load(),如下:
functionareas_load(id)
{
$.get("/ajax/areaajax.php",{areaid:id},
function(data){
$('#shi').html('<optionvalue="">请选择地级市</option>');
$('#xian').html('<optionvalue="">请选择县级市</option>');
if(id!=0)$('#shi').append(data);
});
}
该函数解释如下:
当函数触发时,以get方式传递参数areaid给指定的url地址,就变成了/ajax/areaajax.php?areaid=x这样的地址,然后在这个php文件里接受areaid的值,输出指定的代码,function(data)这个就是php文件里返回的全部代码,当然是在成功完成的状态下.由于jquery封装了这一过程,所以在这里首先起来是非常简便快捷的.再使用$('#shi').append(data)赋值给指定的id.这样一个ajax的完整过程就实现了.
我只是想把最精髓的地方说给大家,让像我一样的新手不在畏惧ajax这个事物,不在局限于一大堆的教材.说的再多不如一试,想学习ajax的马上就可以开始行动起来啦.
在会用的基础上,再去研究底层实现,这样更有底气,更有耐心和信心.
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQueryform操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。