<?php include_once("../class/db.php"); header("Content-Type:text/html;charset=utf-8"); $db = new DataBase("localhost","root","123","csdn","utf8"); $sql = "select p.id,pname,group_concat(cname) as cname from province p,city c where p.id=c.pid group by pname order by p.id"; $records = $db->sqlquery($sql); ?> <html> <head> <title>级联下拉框</title> <script language="javascript"> var array = new Array(); function convert(value){ var val = array[value]; var sub = val.split(","); var city = document.getElementById("city"); city.options.length=0; for(i=0;i<sub.length;i++){ var option = document.createElement("option"); option.value = sub[i]; option.text = sub[i]; city.add(option); } } </script> </head> <body> <select name="province" id="province" onchange="convert(this.value)"> <?php foreach ($records as $key=>$record){ echo "<option value='$key'>$record->pname</option>" ?> <script language="javascript"> array[<?=$key ?>] = "<?=$record->cname ?>"; </script> <?php } ?> </select> <select name="city" id="city"> </select> <script language="javascript"> var sub = array[0].split(","); var city = document.getElementById("city"); city.options.length=0; for(i=0;i<sub.length;i++){ var option = document.createElement("option"); option.value = sub[i]; option.text = sub[i]; city.add(option); } </script> </body> </html>
biaoti表里的title为父类，s_biaoti表里面的s_title为子类
当选择titel时，自动选择s_biaoti里面的s_title的值
<select name>
<option></option>
</select>
这样的
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body bgcolor="#FFFFFF">
<html> <script language="javascript"> var areaArray = new Array(); areaArray[areaArray.length]=new Array("10","北京市"); areaArray[areaArray.length]=new Array("20","天津市"); areaArray[areaArray.length]=new Array("30","上海市"); var townArray = new Array(); townArray[townArray.length]=new Array("10","10010","东城区");
townArray[townArray.length]=new Array("10","10011","西城区");
townArray[townArray.length]=new Array("10","3000","朝阳区");
townArray[townArray.length]=new Array("10","4000","海淀区");
townArray[townArray.length]=new Array("10","5","宣武区");
townArray[townArray.length]=new Array("10","6","崇文区"); townArray[townArray.length]=new Array("20","1","南浔镇"); townArray[townArray.length]=new Array("20","2","菱湖镇"); townArray[townArray.length]=new Array("30","1","乐清"); townArray[townArray.length]=new Array("30","2","苍南"); function setTown(obj1ID,obj2ID){ var objArea = document.getElementById(obj1ID); var objTown = document.getElementById(obj2ID); var i; var itemArray = null; if(objArea.value.length > 0){ itemArray = new Array(); for(i=0;i<townArray.length;i++){ if(townArray[i][0]==objArea.value){ itemArray[itemArray.length]=new Array(townArray[i][1],townArray[i][2]); } } } for(i = objTown.options.length ; i >= 0 ; i--){ objTown.options[i] = null; } objTown.options[0] = new Option("请选地区"); objTown.options[0].value = ""; if(itemArray != null){ for(i = 0 ; i < itemArray.length; i++){ objTown.options[i+1] = new Option(itemArray[i][1]); if(itemArray[i][0] != null){ objTown.options[i].value = itemArray[i][0]; } } } } </script> <body> <table width="99%" border="0" align="center" style="border-bottom:1px solid #cccccc"> <tr> <td width="10"><select name="areaid" id="areaid" onChange="setTown('areaid','townid')"> <option value="">请选市县</option> <option value="10">北京</option> <option value="20">上海</option> <option value="30">安徽</option> </select> </td> <td width="10"><select name="townid" id="townid"> <option value="">请选地区</option> </select> </td> </tr> </table> </body></html>
应该差不多就是下拉框联动的意思。两种方式
1、两个表的数据都取出来(缓存为Js文件最好)，按照一定的规则生成数据，发生改变读取相应的数据填充
2、第一次只取出biaoti数据直接生成Select，发生change时AJAX获取s_biaoti数据填充
<?php
include_once("../class/db.php");
header("Content-Type:text/html;charset=utf-8");
$db = new DataBase("localhost","root","123","csdn","utf8");
$sql = "select p.id,pname,group_concat(cname) as cname from province p,city c where p.id=c.pid group by pname order by p.id";
$records = $db->sqlquery($sql);
?>
<html>
<head>
<title>级联下拉框</title>
<script language="javascript">
var array = new Array();
function convert(value){
var val = array[value];
var sub = val.split(",");
var city = document.getElementById("city");
city.options.length=0;
for(i=0;i<sub.length;i++){
var option = document.createElement("option");
option.value = sub[i];
option.text = sub[i];
city.add(option);
}
}
</script>
</head>
<body>
<select name="province" id="province" onchange="convert(this.value)">
<?php
foreach ($records as $key=>$record){
echo "<option value='$key'>$record->pname</option>"
?>
<script language="javascript">
array[<?=$key ?>] = "<?=$record->cname ?>";
</script>
<?php
}
?>
</select>
<select name="city" id="city">
</select>
<script language="javascript">
var sub = array[0].split(",");
var city = document.getElementById("city");
city.options.length=0;
for(i=0;i<sub.length;i++){
var option = document.createElement("option");
option.value = sub[i];
option.text = sub[i];
city.add(option);
}
</script>
</body>
</html>
然后在URL加两个参数就OK了，两个控件各代表一个参数，然后根据参数到数据库取数据显示出来就可以了。无限级的也可以弄，只是在数据库里面做一些手脚，用一个字段专门用于排序即可。