jQueryAjax二级联动下拉菜单例子

HTML5培训技术

二级联动下拉菜单，可以说是Ajax的经典应用了。

我们用一个根据地区选择学校的例子来说明。

二级联动下拉菜单

介绍一下要准备的文件，一共3个。

ajax_test.html：主要操作页面，在这里显示二级联动下拉菜单；

get_local.php：取得地区名称的后台页面，返回所有的地区名称；

get_school.php：取得学校名称的后台页面，接受地区名称和转码参数，返回该地区的学校名称。

数据库的结构：
表：school
字段：id,local,school

ajax_test.html

jQuery Ajax 二级联动下拉菜单
<script language="javascript"src="http://www.taotg.com/post/js/jquery-1.3.2.min.js">《script》
<script language="javascript" >
function get_local() {
$.ajax({
url:'get_local.php',//通过Ajax取数据的目标页面
type:'get',//方法，还可以是"post"
dataType:'text',//数据类型，还有其它的，详见jQuery手册
success:function(locals)//成功后执行的语句，这里是一个函数，“locals”是返回的数据
{
$("#local").append(locals);
}
});
}

get_local();//自动启动读取地区程序

《script》

get_local.php：

header("Content-type: text/html;charset=gb2312");//输出编码,避免中文乱码
include ("const.php");//这里放的是连接数据库的所有参数，可根据情况自行编写
link_data();//连接数据库的函数，写在const.php里的

$sql="select local from school group by local order byhex(local)";
$result= _query($sql);

//循环输出数据列
while($rows=mysql_fetch_array($result)){
$i++;
echo "".$rows[0]."n";
}
?>

get_school.php：

header("Content-type: text/html;charset=gb2312");//输出编码,避免中文乱码
$temp_local=$_GET[local];
$local=iconv("UTF-8","gb2312",$_GET[local]);//Firefox和Opera需要转码
$trans=iconv("UTF-8","gb2312",$_GET[trans]);//同上
$school=iconv("UTF-8","gb2312",$_GET[trans]);//同上

include ("const.php");
link_data();
if (($_GET[trans]=="1")) {
$sql="select school from school where local="".$local."" group byschool order by hex(school)";
} else if ($trans=="0"){
$sql="select school from school where local="".$temp_local.""group by school order by hex(school)";
}

$result=mysql_query($sql);
//循环输出数据列
$i=0;
while($rows=mysql_fetch_array($result)){
$i++;
if ($schoo==$rows[0]) {
echo "n";
} else {
echo "n";
}
}
?>

下面是我改的ASP版：

jQuery Ajax 二级联动下拉菜单
<script language="javascript" type="text/javascript"src="http://www.taotg.com/post/JScripts/jquery-1.3.2.min.js">《script》
<script language="javascript" >
function get_BigClass() {
$.ajax({
url:'get_BigClass.asp',//通过Ajax取数据的目标页面
type:'get',//方法，还可以是"post"
dataType:'text',//数据类型，还有其它的，详见jQuery手册
success:function(locals)//成功后执行的语句，这里是一个函数，“locals”是返回的数据
{
$("#BigClassID").append(locals);
}
});
}

get_BigClass();//自动启动读取地区程序

《script》

get_SonClass.asp

<%
Response.Charset="gb2312"
SqlClass = "Select ClassID,ClassName,DefaultPicUrl FromItineraries_Class Where DeepTh = 0 Order By RootID Asc, RankingAsc"
Set RsClass = Conn.Execute(SqlClass)
if RsClass.bof and RsClass.bof then
else
do while not RsClass.eof
Response.Write ""&RsClass("ClassName")&""& vbcrlf

RsClass.movenext
loop

end if
RsClass.Close
set RsClass=nothing
%>

get_SonClass.asp

<%
Response.Charset="gb2312"
ClassID=Request("ClassID")
trans=Request("trans")
SqlClass = "Select ClassID,ClassName,DefaultPicUrl FromItineraries_Class Where ParentID = "&ClassID&" Order ByRootID Asc, Ranking Asc"
Set RsClass = Conn.Execute(SqlClass)
if RsClass.bof and RsClass.bof then
else
do while not RsClass.eof
Response.Write ""&RsClass("ClassName")&""& vbcrlf

RsClass.movenext
loop

end if
RsClass.Close
set RsClass=nothing
%>

上一篇：使用jQuery制作PHP的AJAX表单

下一篇：使用jQueryUIDialog创建友好的弹出对话框