PHP+AJAX制作联动下拉菜单

最新推荐文章于 2021-03-28 16:28:18 发布
最新推荐文章于 2021-03-28 16:28:18 发布
阅读量560 收藏
点赞数
分类专栏： PHP 文章标签： ajax php xmlhttprequest header function callback
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sobeautiy/article/details/6111669
版权

<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级菜单或多级菜单可以依葫芦画瓢，就行添加就行了；

 

sobeautiy
关注
专栏目录
ajax 二级联动 php的下拉列表
03-31
ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表
php+ajax动态生成下拉菜单
管子（zero）的杂乱空间
11-22 1894
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
最新php下拉菜单制作,html下拉菜单怎么做？html下拉菜单的实现方法
weixin_34030345的博客
03-20 519
在浏览网站的时候，我们经常可以看到下拉菜单的效果，所以网页的开发过程中下拉菜单有时是不得不使用的，今天的这篇文章就来给大家分享一下html下拉菜单的实现方法，有需要的朋友可以参考一下。话不多说，让我们来直接看正文~在html中有一个select标签可以创建单选和多选菜单，select标签中的option属性用于定义列表中的可用选项。下面我们就来看看html下拉菜单的具体代码：城市合肥芜湖南京高邮h...
php ajax二级联下拉菜单,ajax的下拉菜单级联操作
weixin_42350951的博客
03-12 152
这次给大家带来ajax的下拉菜单级联操作，ajax下拉菜单级联操作的注意事项有哪些，下面就是实战案例，一起来看一下。在开发中常常会遇到菜单的级联操作，比如：国家、城市、乡镇的选择等。当选中某个国家的时候，后面的菜单会把该国家内的城市罗列出来，当选中城市的时候，后面的菜单会把对应的乡镇列出来。解决这种菜单的级联操作的办法，我理解的有两种：①使用js来实现，把页面所用到的级联数据放到js内，当页面加载...
PHP导航下拉菜单的实现如此简单
01-21
复制代码 代码如下: <style> #sddm li a:hover { background: #49A3FF} #sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #EAEBD8; border: 1px solid #5970B2} #sddm div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
10-23
### jQuery+PHP+MySQL二级联动下拉菜单知识点总结 #### 概述 文章主要介绍了如何利用jQuery、PHP和MySQL技术实现一个二级联动下拉菜单，该菜单能够在用户选择主类别（大类）时，自动更新次类别（小类）的选项。 ##...
PHP+ajax实现二级联动菜单功能示例
12-19
【PHP+Ajax实现二级联动菜单】是Web开发中常见的交互功能，主要应用于下拉菜单的选择，如省份选择后自动更新对应的城市列表。这种技术利用了JavaScript的Ajax（Asynchronous JavaScript and XML）局部刷新特性，避免...
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
10-25
在本篇心得分享中，作者将详细介绍如何利用ThinkPHP框架和Ajax技术来实现二级联动下拉菜单，并且讲解了如何通过数据库操作实现数据的动态更新，以及如何扩展至三级、四级等多级联动下拉菜单。 首先，是数据库的设计...
php+ajax实现市县下拉框联动的简单代码
weixin_30292843的博客
03-07 82
php+ajax实现市县下拉框联动的简单代码 --------------------------------html------------------------------------------------------<html><head><meta http-equiv="Content-Type" c...
php 多个下拉列表 查询,多个下拉动态查询AJAX PHP MySQL
weixin_35370032的博客
03-17 156
将“WHERE”子句条件放在一个数组中。我会这样做：// filter out invalid values is important$valid_class = array('a', 'b', 'c');$valid_category = array('math', 'science', 'history');// initialize array for WHERE clause condit...
Ajax实现下拉列表从数据库读取数据级联
05-20
Ajax实现下拉列表从数据库读取数据级联
php ajax 两个下拉菜单,Ajax php无限联动下拉菜单实例
weixin_29324877的博客
03-28 167
Ajax无限联动实现方法就是先由用户选择大类，然后我们再用ajax实现数据局部请求给php页面处理，php把用户需要的数据返回到html js进行处理，这样就实现了无限联动下拉菜单的效果了。首先是 Ajax.php文件：这个文件我觉着就是接收数据处理数据的 代码如下 复制代码 mysql_connect("localhost","root","");mysql_...
ajax php 下拉,php框架和ajax实现下拉菜单功能的总结
weixin_29774037的博客
03-11 255
在开发中，使用php和php框架来实现下拉式菜单或者导航菜单还是具有一定的挑战性的，一般情况下除了使用后台语言以外，还会有一些前端的技术配合使用。当下拉菜单变化后触发事件然后通过ajax技术发送到php后台去做数据的处理。下面的文章就具体说明一下如何运用php框架和ajax这些技术来实现下拉菜单的功能。一、可以先了解《形形色色的下拉菜单实现教程》中的相关内容介绍本课程从易到难，循循渐进，从静态网页...
jquery ajax java二级联动_使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例...
weixin_33892912的博客
02-26 297
首先我们需要先建立好数据库，将一些数据插入进去需要两张表：province：省份表city： 城市表如图：然后再在java中建立相关的实体类与之对应再然后，我们就能开始做jdbc的操作了public class ConnectionFactory {private static String driver;private static String url;private static Strin...
php 实现两个select下拉框的数据联动
热门推荐
村里人的IT故事
11-06 1万+
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> role perm modify  function getRole(){  document.role_perm_mod.action="";  document.role_perm_mod.submit(); }  
PHP+AJAX2级联动下拉列表
四人工作室--www.1234ren.com
02-26 3569
 http://www.phpchina.com/bbs/thread-13376-1-1.htmlPHP+AJAX2级联动下拉列表（简单好用）由于大4了，接下来要忙找工作和学校一些繁琐的事情，接下来的1，2个月可能没有时间写原创作品，今晚再弄一个，希望大家喜欢，别忘了支持我哦！^_^。这次给大家展示的是非常常用的一个ajax功能－－联动下拉列表，本程序采用2级联动，根据数据库的内容用ajax
PHP和Ajax实现二级联动下拉菜单（代码、详细注释）
永不停歇
12-07 3165
数据库 ............................................................................................................................... ................................................................
最新php下拉菜单制作,select下拉框样式怎么制作？
weixin_34614674的博客
03-20 394
首先我们先来看看htmlselect下拉框样式的制作：原生的select下拉框其实挺方便的，直接把选项写入option就能得到一个流畅的下拉框，但是原生的样式也是让人忧愁。首先，在各大浏览器中渲染出来的样式结果也是多样化，ie下的样式更是与众不同，会根据选项位置进行滑动。我们这里是用纯HTML制作，连层叠样式表也不要：php中文网之下拉列表下拉列表htmlphppython其它htmlphppyt...
用php完成下拉菜单,最新的8个实现下拉菜单功能的总结
weixin_28858247的博客
03-09 1965
在计算机应用中，下拉式选单是选单的一种表现形式。具体表现为：当用户选中一个选项后，该选单会向下延伸出具有其他选项的另一个选单。下拉式选单通常应用于把一些具有相同分类的功能放在同一个下拉式选单中，并把这个下拉式选单置于主选单的一个选项下。下拉菜单内的项目可以据需要设置为多选或单选，可以用来替代一组复选框(设置为多选)或单选框(设置为单选)。这样比复选框组或单选框组的占用位置小，但不如它们直观。使用 ...
ajax三级联动下拉菜单
最新发布
05-26
好的，我可以为您提供一个基于 AJAX 技术实现的三级联动下拉菜单的示例代码： HTML 代码： ``` 请选择省份 请选择城市 请选择区县 ``` JavaScript 代码： ``` // 获取省份列表 function ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值