PHP+AJAX制作联动下拉菜单

<head>

var req;
        window.οnlοad=function(){
        }
      
        function Change_Select()
        {
            var zhi=document.getElementByIdx('hero').value;
            var url="selecttest.php?id="+escape(zhi);
            if(window.XMLHttpRequest)
            {
                req=new XMLHttpRequest();
            }else if(window.ActiveXObject)
            {
                req=new ActiveXObject("Microsoft.XMLHTTP");
            }
            if(req)
            {
                req.open("GET",url,true);
                req.onreadystatechange=callback;
                req.send(null);
            }
        }
      
        function callback()
        {
            if(req.readyState == 4)//判断对象状态
            {
                if(req.status == 200)//信息已成功返回,开始处理信息
                {
                    parseMessage();
                 
                }else{
                    alert("Not able to retrieve description"+req.statusText);
                }
            }
        }
      
        function parseMessage(){
            var xmlDoc=req.responseXML
            var xSel=xmlDoc.getElementsByTagName_r("content");
            var select_root=document.getElementByIdx("second");
            select_root.options.length=0;
            for(var i=0;i<xSel.length;i++)
            {
                var xValue=xSel[i].childNodes[0].firstChild.nodeValue;
                var xText=xSel[i].childNodes[1].firstChild.nodeValue;
                var option=new Option(xText,xValue);
                try{
                    select_root.add(option);
                }catch(e){
                }
            }
        }
   
     function Change_Select1()
        {
            var zhi=document.getElementByIdx('second').value;
            var url="selecttest1.php?id="+escape(zhi);
            if(window.XMLHttpRequest)
            {
                req=new XMLHttpRequest();
            }else if(window.ActiveXObject)
            {
                req=new ActiveXObject("Microsoft.XMLHTTP");
            }
            if(req)
            {
                req.open("GET",url,true);
                req.onreadystatechange=callback1;
                req.send(null);
            }
        }
      
        function callback1()
        {
            if(req.readyState == 4)
            {
                if(req.status == 200)
                {
                    parseMessage1();
                 
                }else{
                    alert("Not able to retrieve description"+req.statusText);
                }
            }
        }
      
        function parseMessage1(){
             var xmlDoc=req.responseXML
            var xSel=xmlDoc.getElementsByTagName_r("content");
            var select_root=document.getElementByIdx("three");
            select_root.options.length=0;
            for(var i=0;i<xSel.length;i++)
            {
                var xValue=xSel[i].childNodes[0].firstChild.nodeValue;
                var xText=xSel[i].childNodes[1].firstChild.nodeValue;
                var option=new Option(xText,xValue);
                try{
                    select_root.add(option);
                }catch(e){
                }
            }
        }

</head>

<body>

<SELECT name="hero" id="hero" onChange="Change_Select()">
      <OPTION value=0 selected>请选择一级因素</OPTION>

      <OPTION value=1>a</OPTION>

      <OPTION value=2>b</OPTION>

</SELECT>

 
<SELECT name="second" id="second" οnchange="Change_Select1()">
       <OPTION value="0" selected>
        请选择二级因素
       </OPTION>
      </SELECT>

 
<SELECT name="three" id="three">
       <OPTION value="0" selected>
        请选择三级因素
       </OPTION>

</body>

通过触发onchange事件将select相应的值发送到selecttest.php页面和selecttest1.php(看JS脚本段),生成相应的xml。

 
selecttest.php页面:

<?php $id=$_GET['id'];
global $dom;
global $root;
$dom= new DOMDocument("1.0","utf-8");
header("Content-Type: text/xml;");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
$root = $dom->createElement("contents");
$dom->appendChild($root);
if($id==0){
 $content = $dom->createElement("content");
 $root->appendChild($content);
 $item = $dom->createElement("value");
 $content->appendChild($item);
 $text = $dom->createTextNode(0);
 $item->appendChild($text);
 $item = $dom->createElement("text");
 $content->appendChild($item);
 $text = $dom->createTextNode(iconv('gb2312','utf-8',"请选择二级因素"));
 $item->appendChild($text);
 echo $dom->saveXML();
}else{
 require_once("./database/conn.php");
 $db = new database();
 $cn = $db->conn;
 $sql="select id,属性名称 from 实体属性定义表 t where t.上级关系=".$id;
 $stmt = oci_parse($cn,$sql);
 oci_execute($stmt);
 $nrows=ocifetchstatement($stmt, $results);
 $content = $dom->createElement("content");
 $root->appendChild($content);
 $item = $dom->createElement("value");
 $content->appendChild($item);
 $text = $dom->createTextNode(0);
 $item->appendChild($text);
 $item = $dom->createElement("text");
 $content->appendChild($item);
 $text = $dom->createTextNode(iconv('gb2312','utf-8',"请选择二级因素"));
 $item->appendChild($text);
 for($i = 0; $i < $nrows; $i++){
 $content = $dom->createElement("content");
 $root->appendChild($content);
 $item = $dom->createElement("value");
 $content->appendChild($item);
 $text = $dom->createTextNode($results["ID"][$i]);
 $item->appendChild($text);
 $item = $dom->createElement("text");
 $content->appendChild($item);
 $text = $dom->createTextNode(iconv('gb2312','utf-8',$results["属性名称"][$i]));
 $item->appendChild($text);
 }
 echo $dom->saveXML();
 oci_free_statement($stmt);
}
?>


selecttest1.php页面:

<?php $id=$_GET['id'];
global $dom;
global $root;
$dom= new DOMDocument("1.0","utf-8");
header("Content-Type: text/xml;");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
$root = $dom->createElement("contents");
$dom->appendChild($root);
if($id==0){
$content = $dom->createElement("content");
$root->appendChild($content);
$item = $dom->createElement("value");
$content->appendChild($item);
$text = $dom->createTextNode(0);
$item->appendChild($text);
$item = $dom->createElement("text");
$content->appendChild($item);
$text = $dom->createTextNode(iconv('gb2312','utf-8',"请选择三级因素"));
$item->appendChild($text);
echo $dom->saveXML();
}else{
require_once("./database/conn.php");
$db = new database();
$cn = $db->conn;
$sql="select id,属性名称 from 实体属性定义表 t where t.上级关系=".$id;
$stmt = oci_parse($cn,$sql);
oci_execute($stmt);
$nrows=ocifetchstatement($stmt, $results);
$content = $dom->createElement("content");
$root->appendChild($content);
$item = $dom->createElement("value");
$content->appendChild($item);
$text = $dom->createTextNode(0);
$item->appendChild($text);
$item = $dom->createElement("text");
$content->appendChild($item);
$text = $dom->createTextNode(iconv('gb2312','utf-8',"请选择三级因素"));
$item->appendChild($text);
for($i = 0; $i < $nrows; $i++){
$content = $dom->createElement("content");
$root->appendChild($content);
$item = $dom->createElement("value");
$content->appendChild($item);
$text = $dom->createTextNode($results["ID"][$i]);
$item->appendChild($text);
$item = $dom->createElement("text");
$content->appendChild($item);
$text = $dom->createTextNode(iconv('gb2312','utf-8',$results["属性名称"][$i]));
$item->appendChild($text);
}
echo $dom->saveXML();
oci_free_statement($stmt);
}
?>


其实selecttest.php和selecttest1.php页面可以合并成一个页面(传个flag参数进行区别就行了),但是为了更清晰点,所以将2个

页面分开写;要制作4级菜单或多级菜单可以依葫芦画瓢,就行添加就行了;

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值