4.大区select和对应城市select:jsp

最新推荐文章于 2022-11-19 23:13:54 发布
种子之家
最新推荐文章于 2022-11-19 23:13:54 发布
阅读量603
点赞数
CC 4.0 BY-SA版权
分类专栏：下拉联动文章标签： jsp xmlhttprequest radiobutton ajax class 服务器
本文链接：https://blog.youkuaiyun.com/seeds_home/article/details/6937984
下拉联动专栏收录该内容
5 篇文章
订阅专栏
本博客提供了一个交互式的界面，允许用户通过选择分销大区和城市，以及选择展示方式（饼图或柱状图），来查看和分析分销商级别的分布情况。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<%@ page language="java" pageEncoding="GBK" contentType="text/html; charset=GBK"%>
<%@ include file="../Common.jsp" %>
<html>

  <head>
  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    
	<title>分销商级别分布图</title>
	<link rel="stylesheet" href="../style/drp.css">
	
	<script type="text/javascript">
		
		/**
		 * 查询按钮单击事件的响应函数的调用函数
		 */
		function query() {
			
			// iframe,用来显示饼图或是柱状图 
			var pageFrame = window.document.getElementById("pageFrame");
			// radiobutton,选择饼图或是柱状图
			var radiobuttons = window.document.getElementsByName("radiobutton");
			// radiobutton的值,选择饼图或是柱状图
			var radiobuttonValue;
			
			// 获取用户的选择,选择饼图或是柱状图
			for(var i = 0; i < radiobuttons.length; i++) {  
		        if (radiobuttons[i].checked) {  
		        	radiobuttonValue = radiobuttons[i].value;
		        }  
	    	}  
			
			// 设置iframe的src,src是servlet,返回的要么是饼图,要么是柱状图
			if (radiobuttonValue == "pieChart") {
				pageFrame.src = "${pageContext.request.contextPath}/servlet/CharMemoServlet";
			
			} else {
				pageFrame.src = "${pageContext.request.contextPath}/servlet/BarChartServlet";
			}
			
		}
		
		// XMLHttpRequest对象
		var xmlHttpRequest;
		
		/**
		 *	大区select的option发生变化时调用此函数,把大区对应的城市查出来,放在城市select的option中
		 *  这个方法将使用XMLHttpRequest对象来进行AJAX的异步数据交互
		 */
		function getCities(field) {
	
			// 获取大区select的option的value
			var regionValue = field.value;
	
			// 创建XMLHttpRequest对象,需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
	
			// 针对FireFox，Mozillar，Opera，Safari，IE7，IE8
			if (window.XMLHttpRequest) {
				xmlHttpRequest = new XMLHttpRequest();
	
				//	针对某些特定版本的mozillar浏览器的BUG进行修正
				if (xmlHttpRequest.overrideMimeType) {
					xmlHttpRequest.overrideMimeType("text/xml");
				}
	
				// 针对IE6，IE5.5，IE5
			} else if (window.ActiveXObject) {
				// 两个可以用于创建XMLHttpRequest对象的控件名称，保存在一个js的数组中,排在前面的版本较新
				var activeXName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
	
				for ( var int = 0; int < activeXName.length; int++) {
				
					try {
						// 取出一个控件名进行创建，如果创建成功就终止循环,如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
						xmlHttpRequest = new ActiveXObject(activeXName[int]);
						break;
	
					} catch (e) {
					}
				}
			}
	
			// 确认XMLHTtpRequest对象创建成功
			if (!xmlHttpRequest) {
				window.alert("XMLHttpRequest对象创建失败!");
				return false;
			}
			
			// 注册回调函数,需要函数名，不要加括号
			xmlHttpRequest.onreadystatechange = callback;
			
			// 设置连接信息
		    // 第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
		    // 第二个参数表示请求的url地址，get方式请求的参数也在url中
		    // 第三个参数表示采用异步还是同步方式交互，true表示异步
		    xmlHttpRequest.open("GET", "../servlet/StatReportServlet?command=${getCity}®ionId=" + regionValue + "&date=" + new Date(), true);
			
			// 发送数据，客户端设置信息发送给AJAX引擎
			xmlHttpRequest.send(null);
		}
		
		/**
		 * 回调函数
		 */
		function callback() {
			
			// 接收响应数据,AJAX引擎跟服务器交互完成
			if (xmlHttpRequest.readyState == 4) {
				// AJAX引擎跟服务器交互成功
				if (xmlHttpRequest.status == 200) {
				
					// 服务器(servlet)返回的是XML数据
					var domObj = xmlHttpRequest.responseXML;
					
					// 正确返回XML数据对象
					if (domObj) {
						
						// 获取节点item(数组)
						var itemElement = domObj.getElementsByTagName("item");
						
						// 节点item长度大于0才是正常情况
						// if (itemElement.length > 0) {
							
							// 获取城市select
							var citySelect = window.document.getElementById("province");
							// 往城市select添加option之前先清空之前的option
							citySelect.options.length = 0;
							// 添加默认的option(全部)
							var allOption = new Option("--全部--", 0);
							citySelect.add(allOption);
							
							// 遍历节点item,取出子节点id和name的内容,设置在城市select的option中
							for ( var int = 0; int < itemElement.length; int++) {
								var id = itemElement[int].childNodes[0].firstChild.nodeValue;
								var name = itemElement[int].childNodes[1].firstChild.nodeValue;
								
								// 根据name,id创建新的option
								var nameIdOption = new Option(name, id);
								citySelect.add(nameIdOption);							
							}
							
							
						// } // else {
							// window.alert("XML数据格式错误,原始的文本内容是 " + xmlHttpRequest.responseText);
						// }
						
					} else {
						window.alert("XML数据格式错误,原始的文本内容是 " + xmlHttpRequest.responseText);
					}
				
					// AJAX引擎跟服务器交互失败	
				} else {
					window.alert("AJAX引擎跟服务器交互失败");
				}
			}
		}
</script>
	
  </head>
  
  <body class="body1">
		<form name="clientLevelChartForm" target="_self"
			id="clientLevelChartForm">
			<div align="center">
				<table width="95%" border="0" cellspacing="0" cellpadding="0"
					height="35">
					<tr>
						<td class="p1" height="18" nowrap> 
							
					  </td>
					</tr>
					<tr>
						<td width="522" class="p1" height="17" nowrap>
							<img src="../images/mark_arrow_02.gif" width="14" height="14">
							 
							<b>统计/报表管理>>分销商级别分布图</b>
						</td>
					</tr>
				</table>
				<hr width="100%" align="center" size=0>
				
				<table width="95%" height="40" border="0" cellpadding="0"
					cellspacing="0">
					
					<%-- 分销大区 --%>					
					<tr>
					
						<td width="14%" height="40">
							<div align="right">
								分销大区: 							
							</div>
						</td>
								
						<td width="13%">
						
							<select name="region" class="select1" id="region" onchange="getCities(this)">
							
								<option value="0">
									--全部--
								</option>
								
								<c:forEach items="${regions}" var="regionSet">
									<option value="${regionSet.key }">${regionSet.value }</option>
								</c:forEach>
								
							</select>
							
						</td>
						
						<%-- 分销城市 --%>
						<td width="13%">
						
							<div align="right">
								分销城市: 							
							</div>
													
						</td>
						
						<td width="16%">
						
							<select name="province" class="select1" id="province">
								<option value="0">
										--全部--								
								</option>
							</select>
													
						</td>
							
							
						<td width="16%">
						
							<input name="radiobutton" type="radio" value="pieChart" checked>饼图
							 
	  						<input name="radiobutton" type="radio" value="barChart">柱状图
						
						</td>
						
						
					    <td width="28%"><input name="btnQuery" type="button" class="button1"
								id="btnQuery" value="查询" onclick="query()"></td>
					</tr>
			  </table>
				<hr width="100%" align="center" size=0>
			  <div align="center"></div>
			</div>
			<table width="95%" border="0" cellpadding="0"
					cellspacing="0">
              <tr>
                <td align="center">  
				 <iframe  scrolling="auto"  name="pageFrame" id="pageFrame" src="${pageContext.request.contextPath}/servlet/CharMemoServlet"  frameborder="0" width="500" height="500" ></iframe> 
				</td>
              </tr>
            </table>
			<p> 			</p>
		</form>
	</body>
  
</html>