smarty + ajax 实现二级动态级联菜单

最新推荐文章于 2021-08-06 14:34:25 发布

zengyiwork

最新推荐文章于 2021-08-06 14:34:25 发布

阅读量1.1k

点赞数

文章标签： ajax xmlhttprequest mysql firefox null header

本文链接：https://blog.csdn.net/zengyiwork/article/details/2318179

版权

网上很多js实现的二级级联

但是都是把数据静态存在js的数组里面

下面是我的地区动态二级级联菜单
数据表结构
area_id mediumint(8)
area_pid mediumint(8)
area_name char(20)

getchild.php动态获取子区域
<?
require_once('../manage/connect.php');//连结数据库
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
$pid = $_GET['pid'];
echo '<select name="child" id="child">';
if ($pid == 0)
  echo '<option value="0">请选择父区域</option>';
else
{
  $sql = "select * from area where area_pid=".$pid;
  $result = mysql_query($sql);
  while ($rs = mysql_fetch_array($result))
  {
   echo '<option class="must_input" value='.$rs['area_id'].'> '.$rs['area_name'].' </option>';
  }
  mysql_close();
}
echo '</select>';
?>

smarty代码
<?php
require_once('../libs/Config.inc.php');
require_once('../manage/connect.php');

$p_area_array = null;
$area_array = null;
$sql = "select * from area";
$result = mysql_query($sql);
while ($rs = mysql_fetch_array($result))
{
  if ($rs['area_pid'] == -1)
  $p_area_array[$rs['area_id']] = $rs['area_name'];
  else
  $area_array[$rs['area_id']] = $rs['area_name'];
}
//print_r( $p_area_array);
mysql_close();
$Smarty->assign("p_area",$p_area_array);
$Smarty->assign("area",$area_array);
$Smarty->display('house_info_input.html');
?>

模板文件'house_info_input.html'
<script language="javascript">
var xmlHttp;
function GetXmlHttpObject()//创建xmlhttp
{
     var xmlHttp=null;
     try
     {  // Firefox, Opera 8.0+, Safari
         xmlHttp=new XMLHttpRequest();
     }catch (e)
     {  // Internet Explorer
         try
         {
              xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
         }
         catch (e)
         {
              xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
     }
    return xmlHttp;
}
function GetChildren(pid)
{
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
    {
        alert ("您的浏览器不支持AJAX！");  return;
    }
    var url="getchild.php?pid="+pid;
    xmlHttp.open("GET",url,true);xmlHttp.send(null);
    xmlHttp.onreadystatechange=stateChanged;
}
function stateChanged()
{
    if (xmlHttp.readyState==4)
    {
        document.getElementById("childsp").innerHTML=xmlHttp.responseText;
    }
}
</script>
<select name="area" onChange="GetChildren(this.options[this.selectedIndex].value);">
<option value="0">请选择---</option>
<%{html_options options=$p_area}%>
</select>
<span id="childsp">
<select name="child" id="child">
<option value="0">请选择父区域</option>
</select>
</span>

备注：为什么要用一个span把子地区的select饱含起来，因为我原来是没有span直接获取select的id然后把里面的option用ajax获取过来，但是这样在FireFox里面运行正常，而好像IE却不支持对select元素进行innerHTML的操作，因此我用一个内联元素span来获取ajax的数据