`

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

    博客分类：
  • jsp
jsp 
阅读更多 
<%@ 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();
		}
	}
分享到：
| checkbox多选框级联勾选(父类被都选之后相 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    phpmysql下拉菜单二级联动

    在PHP和MySQL环境中实现下拉菜单的二级联动是一种常见的交互设计，它允许用户在选择一级菜单后，二级菜单根据一级菜单的选择动态加载相关数据。这种技术广泛应用于网站的地区选择、分类导航等场景。下面我们将深入...

    jQuery世界城市三级联动下拉选择代码

    这个"jQuery世界城市三级联动下拉选择代码"是一个实现这种功能的示例，它允许用户通过三个相互关联的下拉列表来选择全球的国家、省份（或州）以及城市。 首先，`jquery.min.js`是jQuery库的核心文件，它是...

    省市二级联动

    省市二级联动是网页开发中常见的交互功能，尤其在表单填写、地址选择等场景中广泛应用。这个功能的主要目的是实现省份（或国家）选择后，自动更新下方的城市（或地区）选项，以提供用户友好的交互体验。在网页前端...

    三级联动地区下拉框.zip

    这个术语通常用于描述在Web应用程序中实现的一种交互式功能，它允许用户通过选择一个下拉菜单（一级）来触发另一个下拉菜单的显示（二级），进一步的选择（三级）会基于前两个级别的选择进行动态更新。这种设计常见...

    三级联动下拉菜单，很简单的

    这样，当鼠标悬停在父菜单或二级菜单上时，对应的子菜单就会显示出来。 3. **JavaScript 交互**： 对于更复杂的交互，如延迟显示、动画效果或者防止快速切换时的闪烁，我们可以使用JavaScript。例如，使用jQuery...

    select下拉菜单实现二级联动效果

    二级联动，即当在一级下拉菜单中选择了某个选项时，二级下拉菜单会相应地更新显示与之相关联的选项，从而提高用户体验。本文将详细讲解如何通过实例代码实现select下拉菜单的二级联动效果。 首先，要实现二级联动...

    jQuery基于tnTreeBox.js三级联动菜单多选选中代码.zip

    通常，每个选择框都会与一个特定的级联级别相对应，例如一级菜单、二级菜单和三级菜单。 接着，`js`文件夹内包含了jQuery和tnTreeBox.js插件的JavaScript代码。tnTreeBox.js是一个jQuery插件，专门用于创建树形结构...

    三级地区联动JS和地区数据

    在用户选择一级地区（如省份）后，JS会查找并加载相应的二级地区（如城市）数据，接着在用户选定二级地区后，再加载三级地区（如区/县）的数据。这个过程可以通过AJAX异步请求服务器获取数据，也可以直接在页面加载...

    jQuery 下拉列表 二级联动插件分享

    本文介绍的jQuery.selected插件就是用来实现二级联动效果的工具，它允许开发者在网页上创建两个相关联的下拉选择框，当用户在第一个下拉列表中选择一个选项时，第二个下拉列表会相应地更新其内容。这一点在很多表单...

    css实现下来框

    本文将通过一段具体的代码示例，来详细介绍如何使用纯CSS技术实现一个简单的二级联动下拉框，并对其中涉及的关键技术和代码进行深入解析。 #### 二、核心CSS技术分析 ##### 2.1 定位技术（Position） 定位是CSS...

    多级联动插件(单选多选)tntreebox插件

    在IT领域，多级联动是一种常见的交互设计，用于在多个下拉框或列表之间建立关联，使得用户在选择某一选项时，其他相关联的选项会根据预设规则自动更新。在网页开发中，这种功能可以增强用户体验，尤其适用于层级结构...

    基于JS实现省市联动效果代码分享

    这种效果通过JavaScript实现，使得用户在选择省份时，城市下拉菜单会自动更新为对应省份的城市列表。以下是对基于JS实现省市联动效果代码的详细解释： 1. **数据结构**： 实现联动效果的关键在于建立一个合适的...

    JS项目，初学者JS学习

    通过JS，我们可以动态地创建、修改和控制这些下拉框，实现联动效果，用户在选择一级选项时，二级甚至三级选项会相应地更新。"很强的下拉框项目.rar"可能就包含这样的示例代码，可以深入学习其工作原理。 2. **JS...

    三江调试软件配置说明书

    根据主机型号的不同，二级菜单项会有相应变化。 - **主机号选择**：通过下拉框选择不同的主机号，可生成或导入对应的配置文件。 - **主机型号选择**：通过下拉框选择不同的主机型号，可直接修改本机主机型号。 - ...

    AntDesign组件库目录.docx

    - **基本用法（省市区级联）**: 支持多级联动的选择，常见于省市区的选择场景。 - **移入展开**: 支持鼠标移入时自动展开下一级选择。 - **选择即改变**: 选择父级选项时，会立即改变子级选项的状态。 - **自定义已...

Magicbox
Global site tag (gtag.js) - Google Analytics