简单的JS二级联动菜单

最新推荐文章于 2020-10-04 05:40:59 发布

S117

最新推荐文章于 2020-10-04 05:40:59 发布

阅读量838

点赞数

分类专栏： javascript学习笔记

本文链接：https://blog.csdn.net/longtian1213/article/details/8562917

版权

javascript学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

看见别人写了一个有关二级联动菜单的demo，自己闲着无事，也写了一个，功能很简单，供大家参考，也算自己复习下JS

java代码

package com.text.ajaxmenu.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxMenuServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

			doPost(request, response);
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		String value = request.getParameter("value");
		String reponseTest = "";
		if(value != null && value.trim().length() > 0){
			reponseTest = this.buildReponseTest(value);
		}
		response.getWriter().print(reponseTest);
	}
	private String buildReponseTest(String value){
		Integer tmp = Integer.valueOf(value.trim());
		String reponseTest = null;
		switch(tmp){
		 	case 1 : reponseTest="{\"1.1\":\"1.1\",\"1.2\":\"1.2\",\"1.3\":\"1.3\"}";break;
		 	case 2 : reponseTest="{\"2.1\":\"2.1\",\"2.2\":\"2.2\",\"2.3\":\"2.3\"}";break;
		 	case 3 : reponseTest="{\"3.1\":\"3.1\",\"3.2\":\"3.2\",\"3.3\":\"3.3\"}";break;
		 	
			}		
		return reponseTest;
	}
}

js代码：

(function(){
	var firstSelect = null;
	var secondSelect = null;
	var http = null;
	AjaxMenu = function(firstSelectId,secondSelectId){
		if(typeof firstSelectId == "string"&& typeof secondSelectId == "string"){
			firstSelect = document.getElementById(firstSelectId);
			secondSelect = document.getElementById(secondSelectId);
			if(firstSelect){
				addEvent(firstSelect,"change",callback);
			}
		}
	}
	/**
	 * 注册事件监听器
	 * @param {Object} node
	 * @param {Object} type
	 * @param {Object} callback
	 */
	var addEvent = function(node,type,callback){
		if(node.addEventListener){
			node.addEventListener(type,callback,false);
		}else if(node.attachEvent){
			node.attachEvent("on" + type,callback)
		}else{
			node["on" + type] = callback
		}
	}
	/**
	 * 事件回调函数
	 * @param {Object} event
	 */
	var callback = function(event){
		event = event || window.event;
		var target = event.srcElement || event.target;
		if(target){
			var value = target.value;
			if(value == 0){
				alert("请选择正确的选项");
				preventDefaul(event)
			}
			http = getHttp();
			if(http){
				http.open("GET","servlet/AjaxMenuServlet?value="+value);
				http.onreadystatechange = function(){
					if(http.readyState == 4){
						if(http.status == 200){
							var text = http.responseText;
							if(text){
								clearChildNode(secondSelect);//清除secondSelect下的所有字节点
								var obj = eval("(" + text + ")");
								for(var i in obj){
									var option = document.createElement("option");//构建option
									option.value = i;
									if(document.all){//针对IE
										option.innerHTML= obj[i];
									}else{
										option.text = obj[i];										
									}
									secondSelect.appendChild(option);
								}
							}
						}
					}
				}
				http.send(null);
			}
		}
	}
	/**
	 * 构建XMLHttpRequest实例
	 * @return {TypeName} 
	 */
	var getHttp = function(){
      if (window.XMLHttpRequest) { 
			return  new XMLHttpRequest();       
		} else if (window.ActiveXObject) {  
			return  new ActiveXObject("Microsoft.XMLHTTP"); 
		}
	}
	/**
	 * 阻止浏览器默认行为
	 * @param {Object} event
	 */
	var preventDefaul = function(event){
	    if ( event && event.preventDefault )
	        event.preventDefault();
	    else
	        window.event.returnValue = false;
	}
	/**
	 * 清除node的所有子节点
	 * @param {Object} node
	 */
	var clearChildNode = function(node){
		while(node.firstChild){
			node.firstChild.parentNode.removeChild(node.firstChild);
		}
	}
})()

html页面：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8" contentType="text/html; charset=utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>Ajax联动菜单</title>
	<script type="text/javascript" src="js/AjaxMenu.js"></script>
  </head>
  
  <body>
    <select id="select1" >
    	<option value="0">请选择</option>
    	<option value="1">1</option>
    	<option value="2">2</option>
    	<option value="3">3</option>
    </select>
    <select id="select2">
    </select>
  </body>
  <script type="text/javascript">
  	var AjaxMenu = new AjaxMenu("select1","select2");
  </script>
</html>

最后是web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>AjaxMenuServlet</servlet-name>
    <servlet-class>com.text.ajaxmenu.servlet.AjaxMenuServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>AjaxMenuServlet</servlet-name>
    <url-pattern>/servlet/AjaxMenuServlet</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

S117

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单的JS二级联动菜单

看见别人写了一个有关二级联动菜单的demo，自己闲着无事，也写了一个，功能很简单，供大家参考，也算自己复习下JSjava代码package com.text.ajaxmenu.servlet;import java.io.IOException;import java.io.PrintWriter;import java.util.HashMap;import java.ut
复制链接

扫一扫

专栏目录