ajax三级联动下拉菜单效果

Ajax写三级联动，先写一个文件类，以后用的时候直接调用；

过来找张桌子：

实现：

中国三级联动：省、市、区；

图：

说着思路：

(1)当用户选择一个省份时，触发一个事件，通过ajax将当前省份的id发送出去，并发送给服务器端的程序。

(2)比如拿中国来说，中国是0001，那么就是中国有自己的数字0001；

北京的代号是11，所以子代号11是北京市区。

也就是说，根据主代码查询子代码；

(3)服务器根据客户端的请求查询数据库，并按照一定的格式返回给客户端

显示页面非常简单，只需要一个div并引入js和jquery文件：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8/

首先，编写三个下拉框来附加id，并执行三种方法：

$(文档)。ready(函数(e){//三个下拉列表//加载显示数据$ ('#三际')。html(' select id=' sheng '/select select select id=' Shi '/select select select id=' qu '/select ')；//加载省fill sheng()；//加载城市FillShi()；//加载区域fill qu()；}接下来，写方法；

三个菜单是联动的，即根据不同省份有不同的选项

不要在此点击事件；使用更改状态时执行的更改事件change()

(1)当省份发生变化时：

//当省改$ ('#笙')。change(function(){ fill Shi()；fill qu()；})市区、区县都变了

(2)当城市面积发生变化时：

//当市场变化时$ ('# shi ')。change(function(){ fill qu()；})});区县变化；

这个逻辑没有错；

然后是省份信息的加载，当ajax遍历完成后，值被写入城市的下拉菜单：

//加载省信息函数FillSheng(){ //根据父代码获取父代码var pcode=' 0001//查找数据$。ajax ({async: false，url:' cl.php '，data: {pcode3360pcode}，type3360' post '，datatype3360' JSON '，success 3360 function(data){ varstr。for(var SJ in data){ str=str ' option value=' ' data[SJ]。AreaCode ' ' '数据[sj]。area name '/optiom '；} $('#sheng ')。html(字符串)；} });}//Load函数FillShi(){ //取父代码var pcode=$('#sheng ')。val()根据父代码//；//查找数据$。ajax根据父代码({async: false，//取消异步URL 3360' cl.php '、data: {pcode:pcode}、type3360' post '、datatype3360' JSON '、success3360函数(data)为(var SJ in data){ str=str ' option value=' ' data[SJ]。AreaCode ' ' '数据[sj]。area name '/optiom '；} $('#shi ')。html(字符串)；}});}//加载区域函数FillQu(){ //根据父代码//，取父代码var pcode=$('#shi ')。val()；//查找数据$。ajax根据父代码({url:' cl.php '，data: {pcode:pcode}，type:' post '，datatype3360' JSON '，success3360函数(data){ varstr=' '；for(var SJ in data){ str=str ' option value=' ' data[SJ]。AreaCode ' ' '数据[sj]。area name '/optiom '；} $('#qu ')。html(字符串)；}});}这里的格式是JSON，以前是‘TEXT’

注：JSON

JSON是一种传递对象的语法，对象可以是名称/值对、数组和其他对象

我们使用一个数组，所以我们需要遍历数组并获取每一条数据。js中用来遍历数组的是

for(数据中的var sj)

{

}

遍历数组。格式化！

在这里，编写上面提到的文件封装类，并找到我们用来连接数据库的类：

增加这一段：

公共函数jsonQuery($sql，$ type=1){ $ db=new MySQL($ this-host，$this-zhang，$this-mi，$ this-dbname)；$ r=$ db-query($ SQL)；if($ type==' 1 '){ $ arr=$ r-fetch _ all(MYSQLI _ ASSOC)；返回JSON _ encode($ arr)；//去掉最后竖线} else { return $ r；} }}嗯，没错

处理页面：

最后来说处理页面：

？PHP $ pcode=$ _ POST[' pcode ']；包括(' db。上课。PHP’)；$db=新db()；$sql='从ParentAreaCode=' { $ pcode } ' '所在的中国各州选择*;echo $ db-JSonquery($ SQL)；连上数据库，对象调用类，写完结构化查询语言语句直接返回就欧克！

就是这么短！

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。