实例说明:两级联动下拉菜单
实现效果:当选择大类时,小类下拉框中的选项内容也会发生变化。
实现原理:根据一个大类的值,通过jQuery将值传输到后台PHP。PHP查询MySQL数据库并获取相应的小类,并将JSON数据返回给前端处理程序。
XHTML
首先,我们必须设置两个下拉选择框,第一个是大类,第二个是小类,大类的值可以预先编写,也可以从数据库中读取。
大的类别:
前端技术
程序开发
数据库
小类:
闪光
PS
jQuery
写一个函数来获得大类选择框的值的第一个,与美元通过背景server.php。getJSON方法,JSON数据读回来,和美元的方法。每个遍历JSON数据,相应的值写入选项字符串,然后附加选项的小类。
功能getselectval(){
美元。getJSON(PHP 服务器。
无功smallname = $(# smallname );
$(选项)(。删除,smallname) / /清晰;原来的选项
$(JSON,函数(下标,数组){)
期权= +阵{标题} + ;
smallname.append(选项);
});
});
}
注意,在遍历JSON数据之前,必须清空小类中的原始项。有两种方法可以清理选项,一种是在前面的代码中提到的,另一种是更简单、更直接的方法:
Smallname。();
然后,在加载页面之后,执行调用函数:
$(函数(){())
GetSelectVal();
$(# bigname)。变化(函数(){)
GetSelectVal();
});
});
在开始页面,下拉框是设置选项,所以getselectval()开头,并getselectval()是当大类选项更改为。
PHP
include_once(连接。PHP); / /数据库链接。
bigid美元美元_get { =bigname};
如果(isset($ bigid)){
$ Q = mysql_query(SELECT * FROM目录CID = $ bigid );
而($行= mysql_fetch_array($ Q)){
选择数组();
}
回声json_encode($选择);
}
根据大类通过jQuery的值,构造SQL语句查询分类表和JSON数据最终输出。同时,我们没有解释什么特别的东西,如PHP和MySQL的连接和查询语句,等等,它们都使用了原句的方法,这样作为mysql_query,等等,目的是使读者能够直观地了解数据传输查询。
最后,附加了mysql表结构。
创建表(目录)
` ID ` MEDIUMINT(6)不为空auto_increment,
` CID ` MEDIUMINT(6)不为空的默认'0',
`标题` varchar(50)不为空,
主键(id)
= MyISAM引擎默认的字符集utf8);
以上是两级下拉菜单的三级组合的介绍。该计划仍有一些不足之处。我们需要进一步改进。我希望这篇文章能给你一些启发。