jQuery ajax实现省市县三级联动
下面我们用Jquery,ajax,做一个省,市,县的三级联动: 下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格第二步:建个PHP页面显示用我是在里放用来接收要显示的省市区表格信息,里面嵌入jquery-1.11.2.min.js和自己封装的三联动省市区的方法
第三步:写封装方法用JS第四步:做个纯php处理页面,这个页面处理传过来的任何代号首先我们要建立数据库: 这就是包含省,市,县的数据库。 下面我们就写主页面:sanji.php: 然后就是js文件: //当省选中的话市也会跟着变去也会变。市和区都会加载一遍
FillSheng();//省 FillShi();//市 FillQu();//区 //给省加点击事件 $("#sheng").change(function(){ FillShi();//市 FillQu();//区 }) //给市加点击事件 $("#shi").change(function(){ FillQu();//区 }) }); //做三个方法分别为省市区 //填充省的方法,如何在表里查询 出省的代号例如:北京0001、天津0001,中国下面所有省都是0001开头的 function FillSheng() { var pcode = "0001"; $.ajax({ async:false,url:"chuli.php",data:{pcode:pcode},type:"POST",dataType:"TEXT",success: function(data){ //返回数据,根据行于行之间的分隔符来拆,拆完之后会返回一数组/行的数组 var hang = data.split("|");
});
});
}); 之后是查询数据库的处理文件: StrQuery($sql);
显示效果如下: 这就是我们要做的省,市,县的三级联动。在这里我们重点强调一下一定要做好逻辑关系,想好了在去动手写代码,要不然容易混乱,这样的话就只能从头开始。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |