php jq ajax 4个下拉框联动案列,jQuery Ajax 之二级联动下拉菜单示例【转】

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

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

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

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

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

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

数据库的结构：

表：school

字段：id,local,school

代码：

ajax_test.html

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

< html xmlns="http://www.w3.org/1999/xhtml">

jQuery Ajax 二级联动下拉菜单

< 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);

}

});

}

function get_school(){

//先判断浏览器类型，决定是否需要转码

if ($.browser.safari) {

trans="0";

}

if ($.browser.msie) {

trans="0";

}

if ($.browser.opera) {

trans="1";

}

if ($.browser.mozilla) {

trans="1";

}

local=$("#local").val();//取得地区名称

$("#school").empty();//清空学校名称

$("#school").append("正在读取 "+local+" 地区学校列表，请稍侯……");

$.ajax({

url:’get_school.php’,

data:"local="+local+"&trans="+trans,//这里和上面不同，向页面传入了参数

type:’get’,

dataType:’text’,

success:function(schools)

{

$("#school").empty();

$("#school").append("请选择 "+local+" 地区院校");

$("#school").append(schools);

}

});

}

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

请选择地区

请选择院校

< /html>

get_local.php：

< ?php

header("Content-type: text/html;charset=gb2312");//输出编码,避免中文乱码

include ("const.php");//这里放的是连接数据库的所有参数，可根据情况自行编写

link_data();//连接数据库的函数，写在const.php里的

$sql="select local from school group by local order by hex(local)";

$result=mysql_query($sql);

//循环输出数据列

while($rows=mysql_fetch_array($result)){

$i++;

echo "".$rows[0]."\n";

}

?>

get_school.php：

< ?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 by school 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 "".$i." ".$rows[0]."\n";

} else {

echo "".$i." ".$rows[0]."\n";

}

}

?>

赶快测试一下吧。

三级联动，直至N级联动下拉列表，道理是一样的。

下次，我们可以试试反推的二级下拉列表：已知学校名称，自动将地区和学校的下拉列表设置到正确的位置。

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/4977.html

微信打赏

支付宝打赏

感谢您对作者Eva的打赏，我们会更加努力！    如果您想成为作者，请点我