ajax+php实例动态二级联菜单效果

main.php
<script language="javascript" src="initajax.js"></script><!--InitAjax()-->
<script>
<!--

function getoption(select1,target)
{
    if(select1.value!=0){
        //select1是提交数据的来源的select菜单名
        var url = "getoption.php?pid="+select1.value;//取得xml的url
        //alert(url);
        var ajax = InitAjax();
        var i = 0;
        ajax.open("GET", url, true);
        ajax.onreadystatechange = function() {
            //如果执行是状态正常,那么就把返回的内容赋值给指定的地方
            if (ajax.readyState == 4 && ajax.status == 200) {
                var obj = ajax.responseXML;
                var properties = obj.getElementsByTagName("property");
                var name,value;
                target.options.length = 1;
                for (var i=0,x=1;i<properties.length;i++,x++) {
                    name = properties[i].getElementsByTagName("name")[0].firstChild.nodeValue;
                    value = properties[i].getElementsByTagName("value")[0].firstChild.nodeValue;
                    target.options[x] = new Option();
                    target.options[x].text = name;
                    target.options[x].value = value;
                }
            }
        }
        ajax.send(null);
    }
}

<form method="post" name="form" action="index.php">
<select name="level1" onchange="getoption(document.form.level1,document.form.level2);"/>
<option selected="ture" value="0">===选择===</option>
<?
if ($nrows>0){
    for ($i=0;$i<$nrows;$i++){
        echo "<option value="{$results[ID][$i]}">{$results[NAME][$i]}</option>";
    }
}
?>
</select>
<select name="level2" onchange="getoption(document.form.level2,document.form.level3);">
<option selected="ture" value="0">===选择===</option>
</select>

iniajax.js:
function InitAjax()
{
    var ajax=false;
    try {
        ajax = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            ajax = false;
        }
    }
    if (!ajax && typeof XMLHttpRequest!='undefined') {
        ajax = new XMLHttpRequest();
    }
    return ajax;
}

getoption.php:
<?php
if($pid=$_GET["pid"])
{
    header("Content-type: text/xml;charset=GB2312");
    echo "<?xml version="1.0" encoding="GB2312"?>";
    include("./oracle.inc");
    $sql="select * from AJAXTEST where PARENTID = $pid";
    //echo $sql;
    $stmt=ociparse($handle,$sql);
    ociexecute($stmt);
    ocicommit($handle);
    ocilogoff();
    $nrows=ocifetchstatement($stmt,$results);
    echo "<properties>";
    //echo "<row>{$nrows}</row>";
    for ($i=0;$i<$nrows;$i++){
    echo "<property>";
    echo "<value>{$results[ID][$i]}</value>";
    echo "<name>{$results[NAME][$i]}</name>";
    echo "</property>";
    }
    echo "</properties>";
}
?>

时间: 2024-10-22 08:02:35

ajax+php实例动态二级联菜单效果的相关文章

JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果_java

写在前面,在笔者完成这个demo的时候,笔者发现现在大家已经不用Ajax来完成联级菜单了,实际上笔者这个demo也并不是为了完成这个,笔者主要的学习方向是JavaWeb后台的业务逻辑开发.但是做后台呢还是需要对前端有所了解,尤其是像Ajax这种异步提交数据的技术需要了解并掌握.所以这里笔者这里用了一个联级菜单来练习Ajax异步提交,当然后续还会写几个异步提交表单的demo. 笔者的后台是用的spring+SpringMVC的框架,这里不对这部分进行解释,重点在jQuery和Ajax. 第一,下载

jQuery实现的背景动态变化导航菜单效果_jquery

本文实例讲述了jQuery实现的背景动态变化导航菜单效果.分享给大家供大家参考.具体如下: 这里介绍一款使用jQuery插件制作完成的导航菜单,一大特点是,菜单的背景有动态效果,与使用的背景图片完全变换,动态效果是在鼠标悬停时出现,也就是把鼠标放在菜单上的时候,背景即开始滚动起来,看上去漂亮极了,而且兼容性也是相当不错的,推荐给网页设计者使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bg-cha-menu-nav-code

AJAX实现web页面中级联菜单的设计

ajax|web|菜单|设计|页面 看了大峡搞的级联菜单,我也班门弄斧一把,嘿嘿,花了一点时间搞了个级联菜单贴上来看看.本例中只要你选择成员分类名称就会自动显示成员名称:    首先在eclipse中建一个项目,名称你自己做主了,这里为Easyjf-menu,对应的浏览器页面代码为: Easyjf-menu.jsp <@page contentType="text/html;charser=UTF-8" language="java"%> <hea

jQuery实现级联菜单效果

 今天我们就带大家体会一下级联菜单的显示,只是实现了简单的效果,不过大都原理是一样的 相信初学HTM+DIV+CSSl的同学们肯定也想做出淘宝网首页的菜单动画吧.今天我们就带大家体会一下级联菜单的显示.小编我只是实现了简单地效果,不过总体来说原理是一样的哦,那么先让大家看看效果图吧.    那么要实现这个效果我们当然要使用到的是jQuery,那么我就开始讲解怎么做的了,先上html和css的代码   代码如下: <!DOCTYPE html>  <html>  <head&g

jQuery实现级联菜单效果(仿淘宝首页菜单动画)_jquery

相信初学HTM+DIV+CSSl的同学们肯定也想做出淘宝网首页的菜单动画吧.今天我们就带大家体会一下级联菜单的显示.小编我只是实现了简单地效果,不过总体来说原理是一样的哦,那么先让大家看看效果图吧. 那么要实现这个效果我们当然要使用到的是jQuery,那么我就开始讲解怎么做的了,先上html和css的代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>menu.html</title> <m

AJAX实现web页面中级联菜单的设计_AJAX相关

看了大峡搞的级联菜单,我也班门弄斧一把,嘿嘿,花了一点时间搞了个级联菜单贴上来看看.本例中只要你选择成员分类名称就会自动显示成员名称:     首先在eclipse中建一个项目,名称你自己做主了,这里为Easyjf-menu,对应的浏览器页面代码为:  Easyjf-menu.jsp  <@page contentType="text/html;charser=UTF-8" language="java"%>  <head>    --..

js 使用form表单select类实现级联菜单效果_基础知识

用例如下: 复制代码 代码如下: <form name="form1" method="POST" action="--WEBBOT-SELF--"> <select id="select1" onchange="select1onchange()"> <option value="1">1</option> <option valu

Java操作XML动态生成级联菜单

Menu.JSP源码 menu .btn input{ background:#FF6600; border-left:1px #FFFFFF solid; border-top:1px #FFFFFF solid; border-right:1px #990000 solid; border-bottom:1px #990000 solid; padding-top:4px; color:#FFFFFF; } function newItem(ele){ var pNode; var pdiv

javascript 省市二级联菜单

var region=new Array('请选择...','安徽','北京市','福建','甘肃','广东','广西','贵州',       '河北','河南','黑龙江','湖北','湖南','吉林','江苏','江西','辽宁','内蒙古','宁夏','青海','山东',       '山西','陕西','上海市','四川','天津市','新疆','云南','浙江','重庆市','西藏'); var zm1=new Array('蚌埠','蚌埠东','合肥','滁州','化鱼山','淮北