`
SuperCustomer
  • 浏览: 110839 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

Ajax二级联动菜单

    博客分类:
  • Ajax
阅读更多

1、JavaScript

<script type="text/javascript">
	var xmlHttp;
	var result;
	function createXMLHttpRequest(){
		if(window.ActiveXObject){
			try{
				xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			}catch(e1){
				try{
					xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
				}catch(e2){
					alert("创建XMLHttpRequest对象失败");
				}
			}
		}else if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}
	}
	function updates(){
		var selected=document.all.m.value;
		if(selected==""){
			while(document.all.s.options.length>0){
				document.all.s.removeChild(document.all.s.childNodes[0]);
			}
			var option=document.createElement("option");
			var defaults=document.all.defaults.value;
			option.text=defaults.split(",")[0];
			option.value=defaults.split(",")[1];
			document.all.s.options.add(option);
			return;
		}
		createXMLHttpRequest();
		xmlHttp.onreadystatechange=process;
		xmlHttp.open("get","testAction.do?m="+selected,true);
		xmlHttp.send(null);
	}
	function process(){
		if(xmlHttp.readyState==4){
			if(xmlHttp.status==200){
				result=xmlHttp.responseText;
				while(document.all.s.options.length>0){
					document.all.s.removeChild(document.all.s.childNodes[0]);
				}
				var results=result.split("/");
				for(var i=0;i<results.length;i++){
					var option=document.createElement("option");
					option.text=results[i].split(",")[0];
					option.value=results[i].split(",")[1];
					document.all.s.options.add(option);
				}
			}
		}
	}
</script>

 2、HTML

<select id="m" name="m" onChange="updates()">
   <option>
   <option value="1">
    a
   </option>
   <option value="2">
    b
   </option>
   <option value="3">
    c
   </option>
  </select>
  <select id="s" name="s">
   <option value="1">
    a
   </option>
  </select>
  <input type="hidden" name="defaults" value="a,1">

3、Action

	String s=request.getParameter("m");
	response.setContentType("text/html;charset=utf-8");
	PrintWriter out=response.getWriter();
	StringBuffer sb=new StringBuffer();
	if("1".equals(s)){
		sb.append("a,");
		sb.append("1/");
		sb.append("b,");
		sb.append("2/");
		sb.append("c,");
		sb.append("3");
		
	}else if("2".equals(s)){
		sb.append("aa,");
		sb.append("11/");
		sb.append("bb,");
		sb.append("22/");
		sb.append("cc,");
		sb.append("33");
	}else if("3".equals(s)){
		sb.append("aaa,");
		sb.append("111/");
		sb.append("bbb,");
		sb.append("222/");
		sb.append("ccc,");
		sb.append("333");
	}
	out.println(sb.toString());
	out.flush();
	out.close();
	return null;
	

 

分享到:
评论

相关推荐

    ajax二级联动菜单

    本示例“ajax二级联动菜单”提供了一个简单的二级菜单实现,利用Ajax和JavaScript,配合.NET后端,帮助初学者理解Ajax的基本原理和应用。 首先,我们要了解什么是联动菜单。联动菜单,又称为下拉级联菜单,是指在一...

    ASP 实用的ajax二级联动菜单

    在本项目中,"ASP 实用的ajax二级联动菜单"是一个结合了这两种技术的应用,旨在创建一个响应快速、交互流畅的二级菜单系统。 在ASP中,我们通常会使用VBScript或JScript作为脚本语言来处理服务器端逻辑。在这个案例...

    asp+ajax二级联动菜单.rar

    标题中的"asp+ajax二级联动菜单.rar"表明这是一个关于使用ASP(Active Server Pages)和AJAX(Asynchronous JavaScript and XML)技术实现的二级联动菜单的项目。在网页设计中,二级联动菜单通常用于导航,当用户...

    纯ajax二级联动菜单

    【标题】:“纯ajax二级联动菜单”是一种网页交互技术,主要应用于动态下拉菜单的实现。在不刷新整个页面的情况下,通过Ajax(异步JavaScript和XML)技术,用户选择一级菜单后,二级菜单会根据一级菜单的选择动态...

    Ajax二级联动菜单实现原理及代码

    在本文中,我们主要关注JavaScript和Ajax技术在二级联动菜单实现中的应用。首先,页面上的JavaScript代码会在页面加载时初始化,确保相关的DOM元素已经可用。接着,通过JavaScript事件监听器(在本例中是第一个下拉...

    一个强健 实用的asp+ajax二级联动菜单(有演示和附源程序打包下载)

    一个强健 实用的ajax二级联动菜单(有演示和附源程序打包下载) 前些天在搞后台的时候要用到二级联动的菜单,到网上去找了半天也没找到满意的,不是这错就是那错,在选择的时候有时候不能返回.真是郁闷. 后来就看到有人...

    一个和数据库关联的,二级联动菜单示例ajax实现

    这个"一个和数据库关联的,二级联动菜单示例ajax实现"是一个实用的代码示例,它展示了如何利用AJAX(异步JavaScript和XML)技术动态加载并更新二级菜单的内容,根据用户在一级菜单中的选择。 首先,我们来理解一下...

    联动菜单大全(含ajax,无限级联动菜单)

    在联动菜单中,用户选择一级菜单后,JavaScript通过AJAX发送请求到服务器,服务器返回新的二级菜单数据,然后JavaScript动态更新DOM树。这种方式提高了用户体验,减少了网络流量,同时降低了服务器压力。 3. **...

    jsp+ajax 三级联动菜单

    【jsp+ajax 三级联动菜单】是一个典型的Web开发技术应用场景,它主要利用JavaServer Pages(JSP)和Asynchronous JavaScript and XML(AJAX)来实现动态网页中的数据交互和页面更新。在这个例子中,我们看到的是一个...

    Ajax菜单二级联动

    在网页开发中,Ajax(Asynchronous JavaScript ...通过以上步骤,我们可以实现一个功能完善的Ajax二级联动菜单。对于初学者来说,掌握这些知识点不仅可以提升网页交互的用户体验,也为进一步学习Web开发打下坚实基础。

    ajax三级联动菜单

    **Ajax 三级联动菜单详解** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。在本项目中,“ajax三级联动菜单”利用Ajax实现了动态的、多级关联的下拉菜单...

    纯JSP+DWR实现三级联动下拉选择菜单 实现无刷新联动 DWR判断用户是否存在 ajax二级联动菜单 DWR操作数据库模拟实现Google搜索效果

    本示例主要展示了如何使用纯JSP和Direct Web Remoting (DWR)技术来构建一个功能丰富的用户界面,其中包括三级联动下拉选择菜单、无刷新联动、用户存在性判断以及模拟Google搜索效果的功能。DWR是一种JavaScript库,...

    AJAX三级联动菜单

    本项目是关于使用AJAX实现一个三级联动菜单,这种菜单通常用于地区选择、类别筛选等场景,当用户在一级菜单中选择一项时,二级菜单会动态加载对应的数据,同理,选择二级菜单后,三级菜单也会相应地更新。...

    ASP+ACC二级联动菜单

    在本场景中,"ASP+ACC二级联动菜单"是指使用ASP技术和Microsoft Access(ACC)数据库构建的二级交互式下拉菜单。这个菜单系统通常会在用户选择一级菜单项时动态加载并显示相应的二级菜单项,提供更流畅的用户体验。 ...

    asp无刷新二级联动菜单

    总的来说,"asp无刷新二级联动菜单"是结合了ASP、JavaScript和Ajax技术,提供高效、流畅的用户界面,使得用户在选择地区或类别时无需等待整个页面刷新,极大地提升了网页的交互性和效率。这种技术在电商网站、信息...

    ajax 二级联动 php

    总结来说,实现ajax二级联动的关键步骤包括: 1. 创建HTML结构,包含两个下拉列表,并为一级列表添加`onchange`事件。 2. 使用JavaScript的XMLHttpRequest对象发送异步请求,当一级列表选择变化时更新二级列表。 3. ...

    asp+ajax二级联动

    ASP(Active Server Pages)是一种由微软开发的服务器端脚本环境,用于生成动态网页内容。在结合AJAX(Asynchronous JavaScript ...通过这样的学习,你可以掌握创建高效、交互性强的ASP+AJAX二级联动下拉菜单的技术。

Global site tag (gtag.js) - Google Analytics