我想问一下 完成一个页面 里面有三个下拉菜单 完成的功能 省 市 区，选择省了以后自动找到这个省中的市，在选择市，自动找到这个市里的区，这个功能怎么实现

billfranck 2008-12-11 08:58:41
我想问一下 完成一个页面 里面有三个下拉菜单 完成的功能 省 市 区，选择省了以后自动找到这个省中的市，在选择市，自动找到这个市里的区，这个功能怎么实现啊!
...全文
515 13 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
思無芷盡 2008-12-11
  • 打赏
  • 举报
 回复
对于你的问题和这个 是一个逻辑，你可以后台多表关联也可以单表关联，只要能对应的关系区分或者对应id和编码能体现出3级的关系就行。
多表不用说了，上面已经说了，
单表可以通过id的规则编码来区分。
比如： 北京 100000
天津 200000
河北 300000
.
.
石家庄301000
邯郸 301002
.
石家庄某某区1 301002
石家庄某某区1 301003

这样就可以区分开来
思無芷盡 2008-12-11
  • 打赏
  • 举报
 回复
用ajax实现：
下面解释常用的一种.
应用json方式，应用到prototype.js框架
页面引入prototype.js
下例：
本例用的sturt2.0页面用的是sturts2.0标签<s:select>,就是充后台加载select 列表里面的数据方便。应普通标签是一样的。
页面上有3个select
第一个：井号id为selJhbm。
第二个：日期时间id为yckssjid
第三个：异常开始井深id为ycjsid
还有一个隐藏域 井号代码 id为selJhdm
实现：选择了井号select列表（这里实现了google搜索加载提示的效果所以井号select列表的text和value都是jhbm就是井号名称－中文，与本例无关）应用ajax从后台查询井号表获取其对应的井号代码赋予id为selJhdm的隐藏域。同时通过井号代码查询a表，（a表中井号代码，日期和开始井深为联合主键，即jhdm－对多日期，井号代码和日期一对多深度）获取对应日期通过查询成果后返回页面调用AddOptionWithSelect（）方法给相应的select对象添加options，这里是先通过井号获得日期，该方法相应添加，再通过井号代码和日期获取对应井深，调用AddOptionWithSelect加载。并作相应重复操作引起的重复值校验。


<input type="hidden" id="selJhdm" name="boJhdm" value="<s:property value="#session.cachedJhdm"/>"/>

<s:select name="jh_list" label="井别代码" cssStyle="width:118px;margin-left:-100px"

			onchange="jhdmSel(this)" id="jhdmSelect"

			list="#request.listjhbm" listKey="JHBM" listValue="JHBM" headerKey="" headerValue=""/></span><input type="text" class="rule_Y_str_" title="井号" name="jh" id="selJhbm"

		style="width: 100px;height:20px; position: absolute; left: 0px;" onblur="onJhdmBlur()"  value="<s:property value="#session.cachedJhbm"/>"/>    异常开始时间：

		 <select name="yckssj" id="yckssjid" disabled="disabled" style="width:145px;" onchange="getYcjsByYckssjandJhdm()"></select>    异常井深：<select name="ycjs" id="ycjsid" style="" disabled="disabled" style="width:80px;"></select>




function getYckssjByJhdm(){

	$("yckssjid").options.length = 0;

	$("yckssjid").disabled="disabled";

	$("ycjsid").options.length = 0;

	$("ycjsid").disabled="disabled";    

	 var url = "queryYckssjByJhdmAjax.action";

     var params = "boJhdm="+$("selJhdm").value;

				new Ajax.Request(

					url,

					{

						method:'post',

						parameters:params,

						onSuccess:function(transport)

						{

							if(!transport.responseText == "")

							{

						    /// $("qxshenheDivid").style.display="";

						    AddOptionWithSelect(transport.responseText,$("yckssjid"));

	                        }else{

	                         alert("该口井没有数据!");

					        }

					 }

				  }	 

				);

            }

            ///向select对象objSelect里插入Option

            function AddOptionWithSelect(str,objSelect){

            var ops  = str.split(",");

            var varItem;

            varItem = new Option("--请选择--","");      

            objSelect.options.add(varItem); 

            for(var i=0;i<ops.length;i++){

            varItem = new Option(ops[i],ops[i]);      

            objSelect.options.add(varItem);  

            }

            objSelect.disabled="";

            }

       function getYcjsByYckssjandJhdm(){

       $("ycjsid").options.length = 0;

	   $("ycjsid").disabled="disabled";   

	 var url = "queryYcjsByJhdmAndYckssjAjax.action";

     var params = "boJhdm="+$("selJhdm").value+"&yckssj="+$("yckssjid").value;

				new Ajax.Request(

					url,

					{

						method:'post',

						parameters:params,

						onSuccess:function(transport)

						{

							if(!transport.responseText == "")

							{

						    /// $("qxshenheDivid").style.display="";

						    AddOptionWithSelect(transport.responseText,$("ycjsid"));

	                        }

					 }

				  }	 

				);

            }
恋空 2008-12-11
  • 打赏
  • 举报
 回复
ajax，js 都可以 呵呵 联动么
jeezz 2008-12-11
  • 打赏
  • 举报
 回复
javascript就能实现啊。！
steryzone 2008-12-11
  • 打赏
  • 举报
 回复
到网上找省市的三级联动不都有吗？
tzb08 2008-12-11
  • 打赏
  • 举报
 回复
典型的ajax功能啊
zxcvbnm259999mnbvcxz 2008-12-11
  • 打赏
  • 举报
 回复
要是有数据库的话 可以用hibernate的一对多功能
做成3个表 分别说 省 市 区的表
然后关联上关系


要是没有数据库 可以写在记事本里
省市区 三个文件 按特定格式写好 然后用字符串的提取方法
取出来



说的很抽象 我这有代码
可以给你


qq：109119522
phoenixLotus 2008-12-11
  • 打赏
  • 举报
 回复
ajax联动了 dwr好用点！
上海_童鞋 2008-12-11
  • 打赏
  • 举报
 回复
实现方法

A. 数据设计
建一张表，分别取为 id,name,upid
可将省、市、县都保存到这张表

B. 接下来通过javascript与ajax来实现三级无刷新联动功能
做两个页，一个是前台显示下拉框，一个是后台读取数据库然后返回值。
返回值可做成一个
<table><tr><td></td><td></td></tr></table>
再用js分另对这个<table>进行行循环赋给下拉框。
xql80329 2008-12-11
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 jeezz 的回复:]
javascript就能实现啊。！
[/Quote]
up
jiduomi123 2008-12-11
  • 打赏
  • 举报
 回复
如果你使用struts的话那个return mapping.findForward那里直接改成return null;就行了
例子中用的是数组来保存省市区 楼主实际应用的话就根据所传递到服务器的相关编号到数据库查询数据然后循环输出就OK了！
jiduomi123 2008-12-11
  • 打赏
  • 举报
 回复
javascript Ajax.class.js


var Ajax = {

	objectList : null,

	initXmlHttp : function(){

		var request = null;

		if(window.XMLHttpRequest){

			request = new XMLHttpRequest();

			if(request.overrideMimeType){

				request.overrideMimeType('text/xml');

			}

		} 

		else if(window.ActiveXObject){

			var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];

			for(var i=0; i<versions.length; i++){

				try{

					request = new ActiveXObject(versions[i]);

					if(request){

						return request;

					}

				} catch(e) {}

			}

		}

		return request;

	},

	processResult : function(responseType, xmlRequest){

		switch(responseType){

			case "text" : Ajax.setObjectList(xmlRequest.responseText); break;

			case "xml" : Ajax.setObjectList(xmlRequest.responseXML.getElementsByTagName("Object") ); break;

			default : Ajax.setObjectList(null); break;

		}

	},

	get : function(url, responseType, callback){

		var xmlRequest = this.initXmlHttp();

		var self = this;

		var date = new Date();

		url += url.indexOf("?") == -1 ? "?" : "&";

		url += "reqTime=" + date.getTime();

		xmlRequest.open("get", url, true);

		xmlRequest.onreadystatechange = function(){

			if(xmlRequest.readyState == 4){

				switch(xmlRequest.status){

					case 0 : break;

					case 200 : if (typeof(callback) === "function") { callback.call(self, Ajax.processResult(responseType, xmlRequest)); } else { alert(" callback is not a function.");}  break;

					case 304 : break;

					case 400 : break;

					case 404 :  alert("XmlHttpRequest status: [404] \nThe requested URL "+url+" was not found on this server."); break;

					case 409 : break;

					case 503 :  alert("XmlHttpRequest status: [503] Service Unavailable"); break;

					default : alert("XmlHttpRequest status: [" + xmlRequest.status + "] Unknow status."); break;

				}

			}

		}

		xmlRequest.send(null);

	},

	getValue : function(rowIndex, columnIndex){

		if(rowIndex != null && columnIndex != null) return this.getObjectList()[rowIndex].childNodes[columnIndex].firstChild.nodeValue;

		else return this.getObjectList();

	}

	,

	setObjectList : function(objectList) {

		this.objectList = objectList;

	},

	getObjectList : function() {

		return this.objectList;

	}

};
jiduomi123 2008-12-11
  • 打赏
  • 举报
 回复
根据你的需求给你弄了个简单的例子：
Servlet Ajax.java


import java.io.IOException;

import java.io.PrintWriter;



import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;



public class Ajax extends HttpServlet {

	

	private static final long serialVersionUID = -468730787792136788L;

	

	String sheng[] = {"广东", "四川", "湖南"};

	String shi[][] = {{"广州", "深圳", "汕尾", "潮州", "揭阳", "梅州"}, {"达川", "绵阳", "达州", "资阳", "泸州", "广元", "巴中"}, 

			{"长沙", "湘潭", "邵阳", "株洲", "邵东", "怀化", "衡阳", "郴州", "永州"}};

	String qu[][][] = {{{"广州区1", "广州区2", "广州区3"}, {"深圳区1", "深圳区2", "深圳区3"}, {"汕尾区1", "汕尾区2", "汕尾区3"}, 

		{"潮州区1", "潮州区2", "潮州区3"}, {"揭阳区1", "揭阳区2", "揭阳区3"}, {"梅州区1", "梅州区2", "梅州区3"}},

					{{"达川区1", "达川区2", "达川区3"}, {"绵阳区1", "绵阳区2", "绵阳区3"}, {"达州区1", "达州区2", "达州区3"}, 

		{"资阳区1", "资阳区2", "资阳区3"}, {"泸州区1", "泸州区2", "泸州区3"}, {"广元区1", "广元区2", "广元区3"}, {"巴中区1", "巴中区2", "巴中区3"}},

					{{"长沙区1", "长沙区2", "长沙区3"}, {"湘潭区1", "湘潭区2", "湘潭区3"}, {"邵阳区1", "邵阳区2", "邵阳区3"}, {"株洲区1", "株洲区2", "株洲区3"}, 

		{"邵东区1", "邵东区2", "邵东区3"}, {"怀化区1", "怀化区2", "怀化区3"}, {"衡阳区1", "衡阳区2", "衡阳区3"}, {"郴州区1", "郴州区2", "郴州区3"}, {"永州区1", "永州区2", "永州区3"}}

		};

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		String method = request.getParameter("method");

		//初始化

		if (method == null || "".equals(method.trim()) )

			this.list(request, response);

		else if (method.equals("getShi") )

			this.getShi(request, response);

		else if (method.equals("getQu"))

			this.getQu(request, response);

	}

	

	//初始化  查询显示所有省份

	private void list(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		response.setContentType("text/html");

		response.setCharacterEncoding("GBK");

		request.setAttribute("sheng", this.sheng);

		request.getRequestDispatcher("/list.jsp").forward(request, response);

	}

	

	//根据省份获得市

	private void getShi(HttpServletRequest request, HttpServletResponse response) throws IOException {

		response.setContentType("text/xml; charset=GBK");

		PrintWriter out = response.getWriter();

		int shengId = Integer.parseInt(request.getParameter("shengId") );

		response.setHeader("Cache-Control", "no-cache");

		out.println("<?xml version='1.0' encoding='GBK'?>");

		out.println("<Results>");

		for (int i = 0; i < this.shi[shengId].length; i++) {

			out.println("<Object>");

			out.println("<Id>"+i+"</Id>");

			out.println("<name><![CDATA["+shi[shengId][i]+"]]></name></Object>");

		}

		out.println("</Results>");

		out.flush();

		out.close();

	}

	

	//根据市获得区

	private void getQu(HttpServletRequest request, HttpServletResponse response) throws IOException {

		response.setContentType("text/xml; charset=GBK");

		PrintWriter out = response.getWriter();

		int shengId = Integer.parseInt(request.getParameter("shengId") );

		int shiId = Integer.parseInt(request.getParameter("shiId") );

		response.setHeader("Cache-Control", "no-cache");

		out.println("<?xml version='1.0' encoding='GBK'?>");

		out.println("<Results>");

		for (int i = 0; i < this.qu[shengId][shiId].length; i++) {

			out.println("<Object>");

			out.println("<Id>"+i+"</Id>");

			out.println("<name><![CDATA["+qu[shengId][shiId][i]+"]]></name></Object>");

		}

		out.println("</Results>");

		out.flush();

		out.close();

	}



}

Jsp list.jsp 我这里使用了jstl来循环输出省份 只为初始化而用


<%@ page language="java" contentType="text/html; charset=GBK"%><%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=GBK" />

<title>三联菜单</title>

<script type="text/javascript" src="../../js/Ajax.class.js"></script>

<script type="text/javascript">

function getShi() {

	if (selSheng.options[0].value == "")

		selSheng.removeChild(selSheng.options[0]);

	//清空市

	while(selShi.options.length > 0)

		selShi.removeChild(selShi.options[0]);

	var option = document.createElement("option");

	option.setAttribute("value", "");

	option.appendChild(document.createTextNode("--- 请选择 ---") );

	selShi.appendChild(option);

	

	//清空区

	while(selQu.options.length > 0)

		selQu.removeChild(selQu.options[0]);

	option = document.createElement("option");

	option.appendChild(document.createTextNode("--- 请选择 ---") );

	selQu.appendChild(option);

	

	var dom = Ajax.getObjectList();

	for (var i = 0; i < dom.length; i++) {

		option = document.createElement("option");

		option.setAttribute("value", Ajax.getValue(i, 0));

		option.appendChild(document.createTextNode(Ajax.getValue(i, 1)) );

		selShi.appendChild(option);

	}

}



function getQu(){

	if (selShi.options[0].value == "")

		selShi.removeChild(selShi.options[0]);

	//清空区

	while(selQu.options.length > 0)

		selQu.removeChild(selQu.options[0]);

	var option = document.createElement("option");

	option.setAttribute("value", "");

	option.appendChild(document.createTextNode("--- 请选择 ---") );

	selQu.appendChild(option);

	

	var dom = Ajax.getObjectList();

	for (var i = 0; i < dom.length; i++) {

		option = document.createElement("option");

		option.setAttribute("value", Ajax.getValue(i, 0));

		option.appendChild(document.createTextNode(Ajax.getValue(i, 1)) );

		selQu.appendChild(option);

	}

}

</script>

  </head>

  <body>

  <select id="selSheng" onchange="Ajax.get('../../servlet/ajax/?method=getShi&shengId='+selSheng.value, 'xml', getShi);"><option value="">--- 请选择 ---</option><c:forEach items="${sheng}" var="s" varStatus="i"><option value="${i.index}">${s}</option></c:forEach></select>

  <select id="selShi" onchange="Ajax.get('../../servlet/ajax/?method=getQu&shengId='+selSheng.value+'&shiId='+selShi.value, 'xml', getQu);"><option value="">--- 请选择 ---</option></select>

  <select id="selQu"><option value="">--- 请选择 ---</option></select>

	</body>

</html>

由于内容太长发不了 javascript代码另回复一条
access字段属性设置下拉列表_关于下拉式菜单，这一篇足够了
下拉菜单主要有两种类型：1.用于导航的下拉菜单；2.用于表单的下拉菜单。在本文中，我们将对以下内容进行介绍：1、 结构剖析下拉菜单的解剖结构与文本输入字段的解剖结构非常相似。2、下拉菜单类型和变体虽然标准的...
web下拉菜单栏怎么设置_如何提升UI界面中的下拉菜单细节设计，来看这篇超全面分析...
由于公众号文章的推送规则已经改成了不按照发布时间排序，所以为了大家能够准时收到我们的文章推送，请记得猛戳右下角的「在看」，并...本文非常全面的介绍了下拉菜单的设计法则，相信读完会对下拉菜单设计有一个全...
bootstrap左侧导航弹出菜单_Power BI导航设计：多级下拉菜单
经常有人问Power BI报表的下拉菜单是怎么设计的，这篇文章就来带你轻松在PowerBI中制作下拉菜单式导航。以这个财务分析报告为例，改成下单菜单导航以后，效果是这样的：知乎视频​www.zhihu.com在导航区，点击财务...
在WEB项目中多维下拉菜单的实现技巧和方法
文章旨在通过一个实例的分析，帮助初学者掌握web项目中多维动态下拉菜单的实现原理和方法，帮助入门者熟悉javascript、DHTML、ASP等相互结合的技巧，从而找到一种动态下拉菜单的通用解决方案。〓正文〓前 言笔者日前...
EXCEL如何实现多级联动下拉菜单
也有一段时间没有写一些经验分享了，打开hi发现有网友问我说，我用offset实现了2级联动，但是我想实现3级甚至更多级的联动，该怎么办，因为时间的关系，没有及时的给予这位朋友回复，就利用这次经验，来写一下小猪...
Web 开发

81,122

社区成员

341,744

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章