//数据库mysql
-- 数据库: `student`
--
-- --------------------------------------------------------
--
-- 表的结构 `student`
--
CREATE TABLE `student` (
`id` int(50) NOT NULL
auto_increment,
`name` varchar(50) collate utf8_unicode_ci NOT
NULL,
`dept` varchar(50) collate utf8_unicode_ci NOT NULL,
`class` varchar(50) collate utf8_unicode_ci NOT NULL,
`sex`
varchar(50) collate utf8_unicode_ci NOT NULL,
`dept_id` int(50) NOT
NULL,
`class_id` int(50) NOT NULL,
PRIMARY KEY
(`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci
AUTO_INCREMENT=5 ;
--
-- 导出表中的数据 `student`
--
INSERT INTO `student` (`id`, `name`, `dept`, `class`, `sex`, `dept_id`,
`class_id`) VALUES
(1, ‘计算机名字‘, ‘计算机工程系‘, ‘计061‘, ‘男‘, 1, 11),
(2, ‘教计名字‘,
‘计算机工程系‘, ‘教技061‘, ‘男‘, 1, 14),
(3, ‘管理名字‘, ‘管理系‘, ‘管理061‘, ‘女‘, 2,
21),
(4, ‘机械名字‘, ‘机械工程系‘, ‘自动化061‘, ‘男‘, 3, 31);
///以下是代码
<?php
$link=mysql_connect("localhost","root","") or
die("数据库服务器连接错误".mysql_error());
mysql_select_db("student",$link)
or die("数据库访问错误".mysql_error());
mysql_query("set character set
gb2312");
mysql_query("set names
gb2312");
?>
<html>
<head>
<title>下拉框连动</title>
</head>
<body>
<script
language="JavaScript">
//二级菜单数组
var subcat = new
Array();
<?php
$i=0;
$sql="select * from
student";
$query=mysql_query($sql,$link);
while($arr=mysql_fetch_array($query))
{
echo
"subcat[".$i++."] = new
Array(‘".$arr["dept_id"]."‘,‘".$arr["class"]."‘,‘".$arr["class_id"]."‘);\n";
}
?>
//三级菜单数组
var subcat2 = new Array();
<?php
$i=0;
$sql="select *
from
student";
$query=mysql_query($sql,$link);
while($arr=mysql_fetch_array($query))
{
echo
"subcat2[".$i++."] = new
Array(‘".$arr["class_id"]."‘,‘".$arr["class"]."‘,‘".$arr["name"]."‘);\n";
}
?>
function
changeselect1(locationid)
{
document.form1.s2.length =
0;
document.form1.s2.options[0] = new
Option(‘22请选择22‘,‘‘);
for (i=0; i<subcat.length;
i++)
{
if (subcat[i][0] ==
locationid)
{
document.form1.s2.options[document.form1.s2.length]
= new Option(subcat[i][1],
subcat[i][2]);
}
}
}
function
changeselect2(locationid)
{
document.form1.s3.length =
0;
document.form1.s3.options[0] = new
Option(‘33请选择33‘,‘‘);
for (i=0; i<subcat2.length;
i++)
{
if (subcat2[i][0] ==
locationid)
{
document.form1.s3.options[document.form1.s3.length]
= new Option(subcat2[i][2], subcat2[i][0]);
}
}
}
</script>三级联动演示:<BR>
<form name="form1">
<select name="s1"
onChange="changeselect1(this.value)">
<option>--请选择--</option>
<option value=1>计算机工程系</option>
<option
value=2>管理系</option>
<option
value=3>机械工程系</option>
</select>
<select name="s2"
onChange="changeselect2(this.value)">
<option>--请选择--</option>
</select>
<select name="s3">
<option>--请选择--</option>
</select>
</form>
</body>
</html>
原文地址:http://www.cnblogs.com/qiuyang1/p/3766874.html