二级联动菜单实现(比如选择地区之后后面的城市下拉框出现相对应的城市)

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/util/taglib.jsp" %>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
 <SCRIPT type="text/javascript">
        var req;
        window.onload=function(){
        }
        
        function Change_Select()
        {
            var zhi=document.getElementById('province').value;
            var url="${pageContext.request.contextPath }/exactinfo.do?action=liandong&id="+escape(zhi);
            if(window.XMLHttpRequest)
            {
                req=new XMLHttpRequest();
            }else if(window.ActiveXObject)
            {
                req=new ActiveXObject("Microsoft.XMLHTTP");
            }
            
            if(req)
            {
                req.open("GET",url,true);
                req.onreadystatechange=callback;
                req.send(null);
            }
        }
        
        function callback()
        {
            if(req.readyState == 4)
            {
                if(req.status == 200)
                {
                    parseMessage();
                }else{
                    alert("Not able to retrieve description"+req.statusText);
                }
            }
        }
        
        function parseMessage()
        {
            var xmlDoc=req.responseXML.documentElement;
            var xSel=xmlDoc.getElementsByTagName('select');
            var select_root=document.getElementById('city');
            select_root.options.length=0;
            
            for(var i=0;i<xSel.length;i++)
            {
                var xValue=xSel[i].childNodes[0].firstChild.nodeValue;
                var xText=xSel[i].childNodes[1].firstChild.nodeValue;
                var option=new Option(xText,xValue);
                try{
                    select_root.add(option);
                }catch(e){
                }
            }
            
            
        }
    </SCRIPT>

<title>添加精准数据</title> 
</head>
<body>
    <div class="page">
	<div class="pageContent">
		<form name="addExactInfo" method="post" action="${pageContext.request.contextPath }/exactinfo.do?action=add&flag=save"  class="pageForm required-validate" onsubmit="return validateCallback(this,navTabAjaxDone);">
			<div class="pageFormContent" layoutH="33">
				<table>
				<tr>
				<td>
				<p id="trpid"  style="display:block">
					<label>所属行业:</label>
					<select  name="productId" class="">
					<c:forEach var="m" items="${categoryList}">
						<option value="${m.categoryId}" >${m.categoryName}</option>
					</c:forEach>
					</select>
				</p>
				</td>
				</tr>
				<tr>
				<td>
				<p>
					<label>客户端下载量:</label>
					<input name="downloadCounts" class="required" type="text" size="30" />
				</p>
				</td>
				</tr>
				<tr>
				<td>
				<p>
					<label>日活跃用户量:</label>
					<input name="activeCounts" class="required" type="text" size="30" />
				</p>
				</td>
				</tr>
				<tr>
				<td>
				<p>
					<label>以往投放广告点击人数:</label>
					<input name="clickCounts" class="required" type="text" size="30" />
				</p>
				</td>
				</tr>
				<tr>
				<td>
				<p>
					<label>用户年龄:</label>
					<input name="age" class="required" type="text" size="30" />
				</p>
				</td>
				</tr>
				<tr>
				<td>
				<p>
					<label>地域:</label>
					<select name="province" id="province" class="" onChange="Change_Select()">
						<option value="0" >请选择</option>
						<c:forEach var="m" items="${areaList}">
							<option value="${m.id}" >${m.title}</option>
						</c:forEach>
					</select>
				</p>
				</td>
				</tr>
				<tr>
				<td>
				<p>
					<label>城市:</label>
					<!-- <input name="city" class="required" type="text" size="30" /> --> 
					<SELECT name="city" id="city">
                            <OPTION value="0">请选择</OPTION>
                    </SELECT>
				</p>
				</td>
				</tr>
				<tr>
				<td>
				<p>
					<label>活跃时间:</label>
					<!-- 
					<input name="activeTime" class="required" type="text" size="30" />
					 -->
					 <input id="d12" type="text" name="activeTime"/> 
     				 <img onclick="WdatePicker({el:$dp.$('d12'),dateFmt:'yyyy-MM-dd HH:mm:ss'})" src="My97DatePicker/skin/datePicker.gif" _fcksavedurl="My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle">
				</p>
				</td>
				</tr>
				<tr>
				<td>
				<p>
					<label>投放版本:</label>
					<input name="version" class="required" type="text" size="30" />
				</p>
				</td>
				</tr>
				<tr>
				<td>
				<p>
					<label>状态:</label>
					<label><input type="radio" name="status" value="1" checked="checked"/>正常</label>
					<label><input type="radio" name="status" value="0"/>锁定</label>
				</p>
				</td>
				</tr>
				</table>
			<div class="formBar">
				<ul>					
					<li><div class="buttonActive"><div class="buttonContent"><button type="submit">保存</button></div></div></li>
					<li>
						<div class="button"><div class="buttonContent"><button type="Button" onclick="navTab.closeCurrentTab()">取消</button></div></div>
					</li>
				</ul>
			</div>
		</form>
	</div>
</div>
  </body>
</html>


上述界面里面的地域和城市是二级联动的

下面对应js方法里面的${pageContext.request.contextPath }/exactinfo.do?action=liandong&id="+escape(zhi);请求对应的后台Action里面的方法:

	/**
	 * 区域二级联动菜单
	 * @param mapping
	 * @param form
	 * @param request
	 * @param response
	 */
	public void liandong(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response){
		 response.setContentType("text/xml");
	     response.setHeader("Cache-Control","no-cache");
	     response.setCharacterEncoding("utf-8");
		
		String id = this.getParameter("id");
        String xml_start="<selects>";
        String xml_end="</selects>";
        String xml="";
        String hql = " from ExactArea ea where 1=1 ";
        String condition = "";
        Map<String, Object> parms = new HashMap<String, Object>();
        if (!"".equals(id)) {
        	condition = " and ea.pid = :pid";
        	parms.put("pid", Integer.parseInt(id));
        }
        List<ExactArea> areaList = dao.findAll(hql, condition, parms);
        if (null != areaList && areaList.size() > 0) {
        	for (int i = 0; i < areaList.size(); i++) {
            	ExactArea area = areaList.get(i);
            	xml += "<select><value>" + area.getTitle() + "</value><text>" + area.getTitle() + "</text></select>";
        	}
        }
        String last_xml=xml_start+xml+xml_end;
        try {
        	// 响应返回代码
			response.getWriter().write(last_xml);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

你可能感兴趣的:(jsp)