省市县3级联

来源：互联网发布：pdfobject.js库下载编辑：程序博客网时间：2024/04/28 13:06

没有什么好说的，就是条件查询而已，当然用AJAX比较简单！

数据库设计也是要点之一

1，填充省份

select * from sheng where fid=0

2，填充市

select * from sheng where fid=下拉框选中的省份的值

3，填充县

select * from sheng where fid=下拉框选中的市的值

静态页面部分代码

<html>
<head><title>3级联下拉框</title></head>

<body>
请选择省份：<select name="sheng" onChange="changeshi(this,'shi');">
<option value="0">==请选择==</option>
<?php
include_once("mysqlfunc.php");
$mysql=new mysqlfunc();
$result=$mysql->execute("select * from sheng where fid=0");
while($list=mysql_fetch_array($result)){
$arr0[]=$list[id];
echo "<option value=$list[id]>$list[name]</option>";
}
?>
</select><br>
请选择城市：<select name="shi" disabled onChange="changeshi(this,'xian');"><option value="0">==请选择==</option></select><br>
请选择县：<select name="xian" disabled><option value="0">==请选择==</option></select><br>
</body>
<script language="javascript" type="text/javascript">
var xmlhr=null;
//声明XMLHttpRequest对象
function changeshi(obj,subnote){
getXMLHR();
if(xmlhr==null){
alert("该浏览器不支持XMLHttpRequest");
return ;
}
var shi=document.getElementById(subnote);
shi.options.length=0;
shi.options.add(new Option("==请选择==",0));
if(obj!=0){
shi.disabled=false;
if(subnote=="shi")
xmlhr.onreadystatechange=huidiao;
else
xmlhr.onreadystatechange=huidiao1;
var url="getsubnode.php?fid="+obj.value;
xmlhr.open("get",url,true);
xmlhr.send(null);
}else
shi.disabled=true;
}

//创建XMLHttpRequest对象
function getXMLHR(){
if(window.XMLHttpRequest)//非IE浏览器
xmlhr= new XMLHttpRequest();
else if(window.ActiveXObject){//IE浏览器，注意这里不能用else
try{
xmlhr= new ActiveXObject("Msxml2.XMLHTTP");//IE5.5以上的版本
}
catch(e){
try{
xmlhr= new ActiveXObject("Microsoft.XMLHTTP");//IE5.5以下版本
}catch(e){}
}
}
}

//回调函数
function huidiao(){
addoption("shi");
}

function huidiao1(){
addoption("xian");
}

//填充下拉框
function addoption(subnote){
var shi=document.getElementById(subnote);
if(xmlhr.readyState=="complete" || xmlhr.readyState==4){
var content=xmlhr.responseText;
var arr=content.split("|");
for(i=0;i<arr.length;i++){
var id=arr[i].substr(arr[i].indexOf("=")+1,arr[i].indexOf(";")-arr[i].indexOf("="));
var name=arr[i].substr(arr[i].lastIndexOf("=")+1);
if(arr[i].length>0)
shi.options.add(new Option(name,id));
}
}
}
</script>
</html>

业务逻辑页面没什么好说的，我用id=##;name=#|连接的，分割即可！

<?php
header("content-type:text/html;charset=gbk");//设置编码，否则汉字乱码会导致错误
include_once("mysqlfunc.php");
$fid=$_GET["fid"];
$content="";
$mysql=new mysqlfunc();
$result=$mysql->execute("select * from sheng where fid=$fid");
while($list=mysql_fetch_array($result)){
$content.="id=".$list["id"].";name=".$list["name"]."|";
}
echo $content;
exit;
?>