投稿
  1. 首页
  2. 随笔

关于php+mysql+ajax省市区三级联动菜单，求帮助

微电子学与计算机 • 2023-3-8 • 随笔 • 阅读 56

关于php+mysql+ajax省市区三级联动菜单，求帮助,第1张

基本思想就是：在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息，代码有点长，但很多都是类似的，例如JS中省、市、区获取方法类似，PHP中通过参数不同执行不同的select语句。

index.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">

<head>

<title>省市区三级联动</title>

<META http-equiv=Content-Type content="text/html charset=gb2312">

<script src="scripts/thumbnails.js" type="text/javascript"></script>

</head>

thumbnails.js代码：

window.onload = getProvince

function createRequest() {//Ajax于PHP交互需要对象

  try {

    request = new XMLHttpRequest()//创建一个新的请求对象

  } catch (tryMS) {

    try {

      request = new ActiveXObject("Msxml2.XMLHTTP")

    } catch (otherMS) {

      try {

        request = new ActiveXObject("Microsoft.XMLHTTP")

      } catch (failed) {

        request = null

      }

    }

  }

  return request

}

function sech(id) {//省市改变时触发，select的onchange事件

    var aa = document.getElementById(id)

if(id=="sheng"){

      getCity(aa.value)//这里aa.value为省的id

}

if(id=="shi")

{

getCounty(aa.value)//这里aa.value为市的id

}

}

function getProvince() {//获取所有省

  request = createRequest()

  if (request == null) {

    alert("Unable to create request")

    return

  }

  var url= "getDetails.php?ID=0"//ID=0时传递至PHP时让其获取所有省

  request.open("GET", url, true)

  request.onreadystatechange = displayProvince //设置回调函数

  request.send(null)    //发送请求

}

function getCity(id){//获取省对应的市

  request = createRequest()

  if (request == null) {

    alert("Unable to create request")

    return

  }

  var url= "getDetails.php?ID=" + escape(id)

  request.open("GET", url, true)

  request.onreadystatechange = displayCity

  request.send(null)

}

function getCounty(id){//获取市对应的区

  request = createRequest()

  if (request == null) {

    alert("Unable to create request")

    return

  }

  var url= "getDetails.php?ID=" + escape(id)

  request.open("GET", url, true)

  request.onreadystatechange = displayCounty

  request.send(null)

}

 

function displayProvince() {//将获取的数据动态增加至select

  if (request.readyState == 4) {

    if (request.status == 200) {

  var a=new Array

var b=request.responseText//将PHP返回的数据赋值给b

 a=b.split(",")//通过","将这一数据保存在数组a中

  document.getElementById("sheng").length=1

  var obj=document.getElementById("sheng')  

  for(i=0i

      obj.options.add(new Option(a[i],i+1)) //动态生成OPTION加到select中，第一个参数为Text,第二个参数为Value值.

    }

  }

}

 

function displayCity() {//将获取的数据动态增加至select

  if (request.readyState == 4) {

    if (request.status == 200) {

  var a=new Array

var b=request.responseText

 a=b.split(",")

  document.getElementById("shi").length=1//重新选择

  document.getElementById("xian").length=1//重新选择

if(document.getElementById("sheng").value!="province"){

  var obj=document.getElementById('shi')  

  for(i=0i

      obj.options.add(new Option(a[i], document.getElementById("sheng").value*100+i+1)) //ocument.getElementById("sheng").value*100+i+1对应的是市的ID。

}

    }

  }

}

function displayCounty() {//将获取的数据增加至select

  if (request.readyState == 4) {

    if (request.status == 200) {

  var a=new Array

var b=request.responseText

 a=b.split(",")

 document.getElementById("xian").length=1

if(document.getElementById("sheng").value!="province"&&document.getElementById("shi").value!="city"){

  var obj=document.getElementById('xian')  

  for(i=0i

      obj.options.add(new Option(a[i],i+1001)) 

}

    }

  }

}

getDetails.php代码：

<?php

header("Content-Type: text/html charset=gb2312")

$conn = new COM("ADODB.Connection") or die("Cannot start ADO")

$connstr = "Provider=SQLOLEDBPersist Security Info=FalseUser ID=rootPassword=123456Initial Catalog=areaData Source=localhost"

 

if($_REQUEST['ID']==0){//获得省列表

$conn->Open($connstr) //建立数据库连接

$sqlstr = "select name from Province" //设置查询字符串

$rs = $conn->Execute($sqlstr) //执行查询获得结果

$num_cols = $rs->Fields->Count() //得到数据集列数

$Province=array()

$i=0

while (!$rs->EOF) {

$Province[$i]=$rs->Fields['name']->Value.","

$rs->MoveNext()

$i++

}

foreach($Province as $val)

echo $val

$conn->Close()

$rs = null

$conn = null

}

if($_REQUEST['ID']>0&&$_REQUEST['ID']<35){//获得省对应的市列表

$conn->Open($connstr) //建立数据库连接

$sqlstr = "select name from City where cid=".$_REQUEST['ID'] //设置查询字符串

$rs = $conn->Execute($sqlstr) //执行查询获得结果

$num_cols = $rs->Fields->Count() //得到数据集列数

$City=array()

$i=0

while (!$rs->EOF) {

$City[$i]=$rs->Fields['name']->Value.","

$rs->MoveNext()

$i++

}

foreach($City as $val)

echo $val

$conn->Close()

$rs = null

$conn = null

}

if($_REQUEST['ID']>100){//获得省市对应的县列表

$conn->Open($connstr) //建立数据库连接

$sqlstr = "select name from County where cid=".$_REQUEST['ID'] //设置查询字符串

$rs = $conn->Execute($sqlstr) //执行查询获得结果

$num_cols = $rs->Fields->Count() //得到数据集列数

$County=array()

$i=0

while (!$rs->EOF) {

$County[$i]=$rs->Fields['name']->Value.","

$rs->MoveNext()

$i++

}

foreach($County as $val)

echo $val

$conn->Close()

$rs = null

$conn = null

}

?>

数据库设计，表格Province表，City表，County表。

要求：Province表需要id和name，id建议从1至34，例如北京id为1，广东id为2，以此类推；

       City表需要id,name和cid，id为cid*100+1，cid为该市的上级，例如深圳的上级为广东省,cid为2的话，深圳的id就是201，以此类推。

       County表需要id,name和cid，因为是三级的关系，id可以随意，建议从10001开始自增。cid为所在上级，例如宝安区的cid为201，龙岗区的cid也为201；

截图：

HTML效果：

完成后效果：

<html>

<head>

<title>智能递归菜单-读取数据库</title>

<style>

TD {

FONT-FAMILY: "Verdana", "宋体"FONT-SIZE: 12pxLINE-HEIGHT: 130%letter-spacing:1px

}

A:link {

COLOR: #990000FONT-FAMILY: "Verdana", "宋体"FONT-SIZE: 12pxTEXT-DECORATION: noneletter-spacing:1px

}

A:visited {

COLOR: #990000FONT-FAMILY: "Verdana", "宋体"FONT-SIZE: 12pxTEXT-DECORATION: noneletter-spacing:1px

}

A:active {

COLOR: #990000FONT-FAMILY: "Verdana", "宋体"FONT-SIZE: 12pxTEXT-DECORATION: noneletter-spacing:1px

}

A:hover {

COLOR: #ff0000FONT-FAMILY: "Verdana", "宋体"FONT-SIZE: 12pxTEXT-DECORATION: underlineletter-spacing:1px

}

.Menu {

COLOR:#000000FONT-FAMILY: "Verdana", "宋体"FONT-SIZE: 12pxCURSOR: hand

}

</style>

<script language=javascript>

function ShowMenu(MenuID)

{

if(MenuID.style.display=="none")

{

MenuID.style.display=""

}

else

{

MenuID.style.display="none"

}

}

</script>

</head>

<body>

<?php

//基本变量设置

$GLOBALS["ID"] =1//用来跟踪下拉菜单的ID号

$layer=1//用来跟踪当前菜单的级数

//连接数据库

$Con=mysql_connect("localhost","root","123456")

mysql_select_db("menu")

//提取一级菜单

$sql="select * from menu where parent_id=0"

$result=mysql_query($sql,$Con)

//如果一级菜单存在则开始菜单的显示

if(mysql_num_rows($result)>0) ShowTreeMenu($Con,$result,$layer,$ID)

//=============================================

//显示树型菜单函数 ShowTreeMenu($con,$result,$layer)

//$con：数据库连接

//$result：需要显示的菜单记录集

//layer：需要显示的菜单的级数

//=============================================

function ShowTreeMenu($Con,$result,$layer)

{

//取得需要显示的菜单的项目数

$numrows=mysql_num_rows($result)

//开始显示菜单，每个子菜单都用一个表格来表示

echo "<table cellpadding='0' cellspacing='0' border='0'>"

for($rows=0$rows<$numrows$rows++)

{

//将当前菜单项目的内容导入数组

$menu=mysql_fetch_array($result)

//提取菜单项目的子菜单记录集

$sql="select * from menu where parent_id=$menu[id]"

$result_sub=mysql_query($sql,$Con)

echo "<tr>"

//如果该菜单项目有子菜单，则添加JavaScript onClick语句

if(mysql_num_rows($result_sub)>0)

{

echo "<td width='20'><img src='tree_expand.gif' border='0'></td>"

echo "<td class='Menu' onClick='javascript:ShowMenu(Menu".$GLOBALS["ID"].")'>"

}

else

{

echo "<td width='20'><img src='tree_collapse.gif' border='0'></td>"

echo "<td class='Menu'>"

}

//如果该菜单项目没有子菜单，并指定了超级连接地址，则指定为超级连接，

//否则只显示菜单名称

if($menu[url]!="")

echo "<a href='$menu[url]'>$menu[name]</a>"

else

echo $menu[name]

echo "

</td>

</tr>

"

//如果该菜单项目有子菜单，则显示子菜单

if(mysql_num_rows($result_sub)>0)

{

//指定该子菜单的ID和style，以便和onClick语句相对应

echo "<tr id=Menu".$GLOBALS["ID"]++." style='display:none'>"

echo "<td width='20'></td>"

echo "<td>"

//将级数加1

$layer++

//递归调用ShowTreeMenu()函数，生成子菜单

ShowTreeMenu($Con,$result_sub,$layer)

//子菜单处理完成，返回到递归的上一层，将级数减1

$layer--

echo "</td></tr>"

}

//继续显示下一个菜单项目

}

echo "</table>"

}

?>

<?php

$id = 1

function test()

{

global $id

unset($id)

}

test()

echo"<font class=menu>".($id)."</font>"// 在 PHP 4 中这里会打印出 1

?>

<?php

$a = 1

$b = 2

function Sum()

{

global $a, $b

$b = $a + $b

}

Sum()

echo "<font class=menu>".$b."</font>"

?>

</body>

</html>

呵呵,看咋样,是递归出来的......

<select name="省级">

<option value="编号">河北省</option>

</select>

弄成这样 只要获取 就获取的是 编号

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/5909531.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
微电子学与计算机 微电子学与计算机 一级用户组
0 0
上一篇 2023-03-08
下一篇 2023-03-08

发表评论

登录后才能评论

评论列表（0条）

保存