jquery+ajax实现省市区三级联动效果简单示例

本文实例讲述了jquery+ajax实现省市区三级联动效果。分享给大家供大家参考，具体如下：

一直想学习下ajax,没时间,汗,这借口太牵强了.下了点教程在手机里,翻了好几遍了,没实战一次.

最近的项目里需要ajax实现效果,就下了个jquery,然后找了个实例,学习了一下,幡然醒悟,nnd,jquery果然强大的一塌糊涂,实现ajax简直就是不费吹灰之力.下面把学习过程跟大家分享下,虽然还没有搞清楚jquery ajax的底层相关.不管了.我们不需要去发明*.呵呵.

先上代码,是一个省市区三级联动的ajax效果:

<select name='sheng' onchange='javascript:areas_load(this.value);' class="selectclass">
<option value='0'>请选择省份</option><option value='13'>a - 安徽</option>
<option value='33'>a - 澳门</option><option value='1'>b - 北京</option>
<option value='4'>c - 重庆</option><option value='14'>f - 福建</option>
<option value='21'>g - 广西</option><option value='20'>g - 广东</option>
<option value='28'>g - 甘肃</option><option value='24'>g - 贵州</option>
<option value='22'>h - 海南</option><option value='18'>h - 湖北</option>
<option value='17'>h - 河南</option><option value='19'>h - 湖南</option>
<option value='5'>h - 河北</option><option value='10'>h - 黑龙江</option>
<option value='15'>j - 江西</option><option value='11'>j - 江苏</option>
<option value='9'>j - 吉林</option><option value='8'>l - 辽宁</option>
<option value='30'>n - 宁夏</option><option value='7'>n - 内蒙古</option>
<option value='29'>q - 青海</option><option value='6'>s - 山西</option>
<option value='23'>s - 四川</option><option value='2'>s - 上海</option>
<option value='16'>s - 山东</option><option value='27'>s - 陕西</option>
<option value='3'>t - 天津</option><option value='34'>t - *</option>
<option value='26'>x - *</option><option value='31'>x - *</option>
<option value='32'>x - 香港</option><option value='25'>y - 云南</option>
<option value='12'>z - 浙江</option>
</select>
<select name="shi" id="shi" class="selectclass" onchange="javascript:area_load(this.value);">
<option value=''>请选择地级市</option>
</select>
<select name="xian" id="xian" class="selectclass">
<option value=''>请选择县级市</option>
</select>
<script language="javascript">
function areas_load(id)
{
$.get("/ajax/areaajax.php", { areaid: id },
function(data){
$('#shi').html('<option value="">请选择地级市</option>');
$('#xian').html('<option value="">请选择县级市</option>');
if(id!=0) $('#shi').append(data);
 });
}
function area_load(id)
{
$.get("/ajax/areaajax.php", { areaid: id },
function(data){
$('#xian').html('<option value="">请选择县级市</option>');
if(id!=0) $('#xian').append(data);
 });
}
</script>

代码有些拙劣,大家见谅,下面说下这段代码的工作流程.

首先是页面中加载了jquery的js库文件,这个不用多说吧.他是ajax效果赖以实现的必不可少的环节.

当下拉框被选中,触发了onchange事件,该事件请求了一个函数areas_load(),如下:

function areas_load(id)
{
$.get("/ajax/areaajax.php", { areaid: id },
function(data){
$('#shi').html('<option value="">请选择地级市</option>');
$('#xian').html('<option value="">请选择县级市</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用法总结》、《jquery form操作技巧汇总》、《jquery常用插件及用法总结》、《jquery操作json数据技巧汇总》、《jquery扩展技巧总结》、《jquery拖拽特效与技巧总结》、《jquery表格(table)操作技巧汇总》、《jquery常见经典特效汇总》、《jquery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jquery程序设计有所帮助。