<%@ page language="java" pageEncoding="UTF-8"%> <%@ page import="java.util.*" %> <%@ page import="edu.syict.www.dao.*" %> <%@ page import="edu.syict.www.POJO.*" %> <!DOCTYPE HTML PUBLIC "-//W
3C
//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'menu.jsp' starting page</title> </head> <body> <% Country c=null ; DBOperator dbo=new DBOperator() ; List listname=dbo.query("SELECT DISTINCT co.name FROM
Country
AS
co") ; List listcity=dbo.query("SELECT DISTINCT co.city FROM
Country
AS
co") ; %> <center> <script type="text/javascript"> var XMLHttpReq; var currentSort; //创建XMLHttpRequest对象 function createXMLHttpRequest() { if(window.XMLHttpRequest) { //Mozilla 浏览器 XMLHttpReq = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE浏览器 try { XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } } //发送请求函数 function sendRequest(url) { createXMLHttpRequest(); XMLHttpReq.open("GET", url, true); XMLHttpReq.onreadystatechange = processResponse;//指定响应函数 XMLHttpReq.send(null); // 发送请求 } // 处理返回信息函数 function processResponse() { if (XMLHttpReq.readyState == 4) { // 判断对象状态 if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息XMLHttpReq.status == 200 updateMenu(); } else { //页面不正常 alert("您所请求的页面有异常。"); } } } //更新菜单函数 function updateMenu() { var res=XMLHttpReq.responseXML.getElementsByTagName("res") ; //alert("res===="+res[0].firstChild.nodeValue); /**下面是用innerHTML输出控件内容的一般用法**/ //var subMenu = ""; //for(var i = 0; i < res.length; i++) { // subMenu = subMenu + " " + res[i].firstChild.data + ""; //} //currentSort.innerHTML = subMenu; var list = document.all.list; list.options.length=0; list.add(new Option("---请选择---","")); for(var i=0;i<res.length;i++){ list.add(new Option(res[i].firstChild.nodeValue,res[i].firstChild.nodeValue)); } } // 创建级联菜单函数 function showSubMenu(obj) { //currentSort =document.getElementById(obj); //currentSort.parentNode.style.display = ""; sendRequest("menujsp.jsp?sort=" + obj); /**下面这一句的作用是:每次选择后回到第一个选项**/ //document.all.mli.options[0].selected=true; } </script> <select name="mli" οnchange="showSubMenu(this.options[this.options.selectedIndex].value)" style="width:150px;"> <option value="">---bbb---</option> <% for(int i=0;i<listname.size();i++){ //c=(Country)listname.get(i) ; out.println("<option value='"+listname.get(i)+"'>"+listname.get(i)+"</option>") ; } %> </select> <select name="list" style="width:100px;"> <option value="">---aaa---</option> <% for(int i=0;i<listcity.size();i++){ out.println("<option value='"+listcity.get(i)+"'>"+listcity.get(i)+"</options>") ; } %> </select> <br> </center> </body> </html> |