`

省市县的二级联动

    博客分类：
  • ajax
DB2XMLDAOCacheSQL 
阅读更多
Jsp页面省市县部分代码代码 复制代码
  1. <tr>   
  2.     <td height="27" align="right" class="textAnmedia" bgcolor="#E7F0F7">请选择省份：</td>   
  3.     <td height="27" align="left" class="textAnmedia" bgcolor="#E7F0F7">   
  4.          <select id="province" name="province" style="width: 380px;">   
  5.                 <option value="-1" >请选择...</option>   
  6.                 <beans:tagHandle id="tagProvince">   
  7.                     <database:prepareQuery id="<%=tagProvince%>" scope="page">    
  8.                     select id,city_code,city_name from tb_area_city where leve = 1  
  9.                     </database:prepareQuery>   
  10.                     <database:rows id="db2" query='<%=tagProvince%>'>   
  11.                     <option value="<%=db2.get("id") %>,<%=db2.get("city_name") %>" ><%=db2.get("city_name") %></option>   
  12.                     </database:rows>   
  13.                     <database:release query='<%=tagProvince%>'/>   
  14.                 </beans:tagHandle>       
  15.          </select>   
  16.          <span id="provinceTip"></span>   
  17.     </td>   
  18. </tr>   
  19. <tr>   
  20.     <td height="27" align="right" class="textAnmedia" bgcolor="#E7F0F7">请选择城市：</td>   
  21.     <td height="27" align="left" class="textAnmedia" bgcolor="#E7F0F7">   
  22.         <select id="city" name="city" style="width: 380px;">   
  23.             <option value="-1" >请选择...</option>   
  24.         </select>   
  25.         <span id="cityTip"></span>   
  26.     </td>   
  27.    </tr>   
  28.  <tr>   
  29.     <td height="27" align="right" class="textAnmedia" bgcolor="#E7F0F7">请选择区/县：</td>   
  30.     <td height="27" align="left" class="textAnmedia" bgcolor="#E7F0F7">   
  31.         <select id="areaCountry" name="areaCountry" style="width: 380px;">   
  32.         <option value="-1" >请选择...</option>   
  33.     </select>   
  34.         <span id="areaCountryTip" style="color: red"></span>   
  35.     </td>   
  36. </tr>  
<tr>
    <td height="27" align="right" class="textAnmedia" bgcolor="#E7F0F7">请选择省份：</td>
    <td height="27" align="left" class="textAnmedia" bgcolor="#E7F0F7">
    	 <select id="province" name="province" style="width: 380px;">
      			<option value="-1" >请选择...</option>
				<beans:tagHandle id="tagProvince">
					<database:prepareQuery id="<%=tagProvince%>" scope="page"> 
					select id,city_code,city_name from tb_area_city where leve = 1
					</database:prepareQuery>
					<database:rows id="db2" query='<%=tagProvince%>'>
					<option value="<%=db2.get("id") %>,<%=db2.get("city_name") %>" ><%=db2.get("city_name") %></option>
					</database:rows>
					<database:release query='<%=tagProvince%>'/>
				</beans:tagHandle>    
   		 </select>
   		 <span id="provinceTip"></span>
    </td>
</tr>
<tr>
    <td height="27" align="right" class="textAnmedia" bgcolor="#E7F0F7">请选择城市：</td>
    <td height="27" align="left" class="textAnmedia" bgcolor="#E7F0F7">
    	<select id="city" name="city" style="width: 380px;">
    		<option value="-1" >请选择...</option>
    	</select>
    	<span id="cityTip"></span>
    </td>
   </tr>
 <tr>
    <td height="27" align="right" class="textAnmedia" bgcolor="#E7F0F7">请选择区/县：</td>
    <td height="27" align="left" class="textAnmedia" bgcolor="#E7F0F7">
    	<select id="areaCountry" name="areaCountry" style="width: 380px;">
    	<option value="-1" >请选择...</option>
   	</select>
    	<span id="areaCountryTip" style="color: red"></span>
    </td>
</tr>

 

 

 

省市县js代码代码 复制代码
  1. $(document).ready(function() {   
  2.     //根据省选择市   
  3.     $("#province").change(function(){   
  4.         //清空城市   
  5.         document.getElementById("city").options.length=0;   
  6.         //清空区/县   
  7.         document.getElementById("areaCountry").options.length=0;   
  8.         $("#areaCountry").append("<option  value='-1'>请选择...</option>");   
  9.         if($("#province").val() == '-1' || $("#province").val().split(',')[0] == '-1') {   
  10.              $("#city").append("<option  value='-1'>请选择...</option>");   
  11.         }   
  12.                     //请求结果   
  13.         $.post('areaLinkage.do',{    
  14.             //参数一   
  15.             flag: 'province',   
  16.             //参数二   
  17.             province_id: $('#province').val().split(',')[0]   
  18.         },    
  19.         //回调函数   
  20.         function(result) {   
  21.             $(result).find("entry").each(function(i){   
  22.                var optionText = $(this).find("optionText").text();   
  23.                var optionValue = $(this).find("optionValue").text();   
  24.                var option = new Option(optionText,optionValue);   
  25.                $("#city").append("<option  value="+optionText +"," + optionValue +">"+optionValue+"</option>");   
  26.             });   
  27.         },   
  28.         //返回类型   
  29.         "xml"  
  30.         );   
  31.     });   
  32.     //根据市选择县   
  33.     $("#city").change(function(){   
  34.         //清空区/县   
  35.         document.getElementById("areaCountry").options.length=0;   
  36.         if($("#city").val() == '-1' || $("#city").val().split(',')[0] == '-1') {   
  37.              $("#areaCountry").append("<option  value='-1'>请选择...</option>");   
  38.         }   
  39.        
  40.                     //请求结果   
  41.         $.post('areaLinkage.do',{    
  42.             //参数一   
  43.             flag: 'city',   
  44.             //参数二   
  45.             city_id: $('#city').val().split(',')[0]   
  46.         },    
  47.         //回调函数   
  48.         function(result) {   
  49.             $(result).find("entry").each(function(i){   
  50.                var optionText = $(this).find("optionText").text();   
  51.                var optionValue = $(this).find("optionValue").text();   
  52.                var option = new Option(optionText,optionValue);   
  53.                $("#areaCountry").append("<option  value="+optionText +"," + optionValue +">"+optionValue+"</option>");   
  54.             });   
  55.         },   
  56.         //返回类型   
  57.         "xml"  
  58.         );   
  59.     });   
  60. });  
$(document).ready(function() {
	//根据省选择市
	$("#province").change(function(){
	    //清空城市
    	document.getElementById("city").options.length=0;
    	//清空区/县
    	document.getElementById("areaCountry").options.length=0;
    	$("#areaCountry").append("<option  value='-1'>请选择...</option>");
    	if($("#province").val() == '-1' || $("#province").val().split(',')[0] == '-1') {
    		 $("#city").append("<option  value='-1'>请选择...</option>");
    	}
			 		//请求结果
	    $.post('areaLinkage.do',{ 
	        //参数一
	    	flag: 'province',
	        //参数二
        	province_id: $('#province').val().split(',')[0]
	    }, 
	    //回调函数
	    function(result) {
	        $(result).find("entry").each(function(i){
	           var optionText = $(this).find("optionText").text();
	           var optionValue = $(this).find("optionValue").text();
	           var option = new Option(optionText,optionValue);
	           $("#city").append("<option  value="+optionText +"," + optionValue +">"+optionValue+"</option>");
    		});
	    },
	    //返回类型
	    "xml"
	    );
	});
	//根据市选择县
	$("#city").change(function(){
	    //清空区/县
    	document.getElementById("areaCountry").options.length=0;
    	if($("#city").val() == '-1' || $("#city").val().split(',')[0] == '-1') {
    		 $("#areaCountry").append("<option  value='-1'>请选择...</option>");
    	}
    
			 		//请求结果
	    $.post('areaLinkage.do',{ 
	        //参数一
	    	flag: 'city',
	        //参数二
        	city_id: $('#city').val().split(',')[0]
	    }, 
	    //回调函数
	    function(result) {
	        $(result).find("entry").each(function(i){
	           var optionText = $(this).find("optionText").text();
	           var optionValue = $(this).find("optionValue").text();
	           var option = new Option(optionText,optionValue);
	           $("#areaCountry").append("<option  value="+optionText +"," + optionValue +">"+optionValue+"</option>");
    		});
	    },
	    //返回类型
	    "xml"
	    );
	});
});

 

 

 

 

省市县action代码代码 复制代码
  1. public class AreaLinkageAction extends Action {   
  2.     /**   
  3.      * 实现二级联动   
  4.      */   
  5.     public ActionForward execute(ActionMapping mapping, ActionForm form,   
  6.             HttpServletRequest request, HttpServletResponse response)   
  7.             throws IOException {   
  8.   
  9.         response.setContentType("text/xml; charset=utf-8");   
  10.         response.setHeader("Pragma", "No-cache");   
  11.         response.setDateHeader("Expires", 0);   
  12.         response.setHeader("Cache-Control", "no-cache");   
  13.         PrintWriter out = response.getWriter();   
  14.         AreaLinkageDao dao = new AreaLinkageDao();   
  15.         List list = new ArrayList();   
  16.         StringBuilder strXML = new StringBuilder();   
  17.         try {   
  18.             String para = "";   
  19.             if (request.getParameter("flag").equals("province")) {   
  20.                 para = request.getParameter("province_id");   
  21.             } else if (request.getParameter("flag").equals("city")) {   
  22.                 para = request.getParameter("city_id");   
  23.             }   
  24.             list = dao.areaLinkage(para, this.getServlet().getServletContext());   
  25.   
  26.             strXML.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");   
  27.             strXML.append("<selectChoice>");   
  28.             if (list.size() > 0) {   
  29.                 strXML.append("<entry>");   
  30.                 strXML.append("<optionText>");   
  31.                 strXML.append("-1");   
  32.                 strXML.append("</optionText>");   
  33.                 strXML.append("<optionValue>");   
  34.                 strXML.append("请选择...");   
  35.                 strXML.append("</optionValue>");   
  36.                 strXML.append("</entry>");   
  37.   
  38.                 for (Iterator it = list.iterator(); it.hasNext();) {   
  39.                     Hashtable ht = new Hashtable();   
  40.                     ht = (Hashtable) it.next();   
  41.                     strXML.append("<entry>");   
  42.                     strXML.append("<optionText>");   
  43.                     strXML.append("" + ht.get("id").toString() + "");   
  44.                     strXML.append("</optionText>");   
  45.                     strXML.append("<optionValue>");   
  46.                     strXML.append("" + ht.get("city_name").toString() + "");   
  47.                     strXML.append("</optionValue>");   
  48.                     strXML.append("</entry>");   
  49.                 }   
  50.                 strXML.append("</selectChoice>");   
  51.   
  52.             }   
  53.             String xml = strXML.toString();   
  54.   
  55.             out.write(xml);   
  56.             out.flush();   
  57.         } catch (Exception e) {   
  58.             e.printStackTrace();   
  59.         }   
  60.   
  61.         out.close();   
  62.   
  63.         return null;   
  64.     }   
  65.   
  66. }  
public class AreaLinkageAction extends Action {
	/**
	 * 实现二级联动
	 */
	public ActionForward execute(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws IOException {

		response.setContentType("text/xml; charset=utf-8");
		response.setHeader("Pragma", "No-cache");
		response.setDateHeader("Expires", 0);
		response.setHeader("Cache-Control", "no-cache");
		PrintWriter out = response.getWriter();
		AreaLinkageDao dao = new AreaLinkageDao();
		List list = new ArrayList();
		StringBuilder strXML = new StringBuilder();
		try {
			String para = "";
			if (request.getParameter("flag").equals("province")) {
				para = request.getParameter("province_id");
			} else if (request.getParameter("flag").equals("city")) {
				para = request.getParameter("city_id");
			}
			list = dao.areaLinkage(para, this.getServlet().getServletContext());

			strXML.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
			strXML.append("<selectChoice>");
			if (list.size() > 0) {
				strXML.append("<entry>");
				strXML.append("<optionText>");
				strXML.append("-1");
				strXML.append("</optionText>");
				strXML.append("<optionValue>");
				strXML.append("请选择...");
				strXML.append("</optionValue>");
				strXML.append("</entry>");

				for (Iterator it = list.iterator(); it.hasNext();) {
					Hashtable ht = new Hashtable();
					ht = (Hashtable) it.next();
					strXML.append("<entry>");
					strXML.append("<optionText>");
					strXML.append("" + ht.get("id").toString() + "");
					strXML.append("</optionText>");
					strXML.append("<optionValue>");
					strXML.append("" + ht.get("city_name").toString() + "");
					strXML.append("</optionValue>");
					strXML.append("</entry>");
				}
				strXML.append("</selectChoice>");

			}
			String xml = strXML.toString();

			out.write(xml);
			out.flush();
		} catch (Exception e) {
			e.printStackTrace();
		}

		out.close();

		return null;
	}

}

 

 

 

省市县dao代码代码 复制代码
  1. public class AreaLinkageDao {   
  2.   
  3.     /**   
  4.      * 根据省ID查询城市信息   
  5.      *    
  6.      * @param parameter   
  7.      * @param servletContext   
  8.      * @return   
  9.      */   
  10.     public List areaLinkage(String provinceId, ServletContext servletContext)   
  11.             throws Exception {   
  12.         RootDaoInterface rootDao = (RootDaoInterface) DataSourceHelper   
  13.                 .getDaoInterfae(servletContext);   
  14.         String sql = "select id,city_code,city_name from tb_area_city where pid = ?";   
  15.         return rootDao.preparedQuery(sql, new String[] { provinceId });   
  16.     }   
  17.   
  18. }  

 

来自：http://waynett.iteye.com/blog/815257

分享到：
| Jquery + Css 实现横纵菜单下拉效果
评论
发表评论

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

相关推荐

    全国最新2010年重新规划省市县二级联动菜单JS,但有区域代码哦

    全国最新2010年重新规划省市县二级联动菜单JS,但有区域代码哦,是自己写的!!不是COPY的!!

    省市县三级、省市二级联动菜单

    标题中的“省市县三级、省市二级联动菜单”指的是在网页设计中常见的下拉菜单功能，这种功能常用于地理信息选择，如用户填写地址时选择所在省份、城市和区县。这种联动效果意味着当用户在一级菜单（省份）中选择一个...

    省市县二级联动三级联动集成

    该插件集成二级联动和三级联动，只需要在html页面上简单调整，js便可自动识别加载哪种联动的数据，需要说明的是，二级联动并不是在三级联动基础上删除第三级，而是对于我国的直辖市如北京，重庆等城市的二三级划分做...

    省市县三级联动excel表

    省市县三级联动和商品类型二级联动excel表

    省市编码二级联动json

    省市编码二级联动json

    java二种不同的省市县联动方式

    在Java开发中，省市县联动是一项常见的功能，主要用于在用户选择某一地区时，根据已选的省份自动填充相应的城市和县区。这种功能通常应用于地址输入、物流配送等场景。这里我们将详细介绍两种不同的实现方式。 1. *...

    省市二级联动mysql数据库

    省市二级联动mysql数据库

    Excel省市县三级联动模

    在提供的文件"新建文本文档 (3).txt"中，可能包含了如何创建和使用这种联动模型的详细步骤和解释，而"Excel省市二级三级联动.xlsx"则是实际的模板文件，包含了上述功能的实际应用。通过学习这个模板和相关说明，你...

    省市二级联动数据

    省市二级联动数据

    MySQL SQL 省市县三级联动（含台湾）

    "MySQL SQL 省市县三级联动（含台湾）"这个主题聚焦于一个特定的数据模型，即用于存储中国行政区域划分的数据库结构，它涉及到省级、市级和县级的层级关系，并且包含了台湾地区的数据。这样的设计在很多应用中都有...

    asp省市县三级联动，可自行修改 添加信息

    在ASP（Active Server Pages）开发中，省市县三级联动是一种常见的功能，用于在网页上创建交互式的下拉选择框，用户可以选择国家、省份、城市，甚至到县这一级的行政区域。这种功能常见于需要用户填写详细地址的场景...

    省市下拉框二级联动完成版（调试通过）

    本案例展示了如何实现简单的省市二级联动功能。其中涉及到了HTML的基本结构、JavaScript的基础操作以及事件监听的使用。开发者可以根据实际需求调整省份数据及城市数据的加载方式，比如从服务器动态获取数据，以提高...

    省市县三级联动

    在IT行业中，"省市县三级联动"是一种常见的前端交互功能，尤其在网页表单填写时，用户选择省、市、县（区）时，下拉菜单会根据前一级的选择自动更新后两级的内容。这种功能提高了用户体验，减少了输入错误。下面我们...

    JQuery省、省市二级联动、省市县/区三级联动

    这里提到的"JQuery省、省市二级联动、省市县/区三级联动"是一个使用jQuery库实现的前端解决方案，它能为用户提供流畅且视觉效果良好的交互体验。 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、...

    省市县3级联动数据库

    在IT领域，3级联动通常指的是在用户界面上的三个下拉菜单之间建立关联，当用户在一级菜单（如省）中选择一项后，二级菜单（如市）会更新为与所选省相关的选项，同样，当用户在二级菜单中选择后，三级菜单（如县或区...

    中国省市县三级联动access数据库

    中国省市县三级联动access数据库 该文件是lanhong0201经过长时间整理出来的，目前最全的国家地理数据库，包括省市县三级所有的行政单位。数据库中已经通过ID关联建...用于开发省市县三级或者省市二级联动控件非常方便。

    省市二级联动Access版

    省市二级联动是一种常见的数据筛选和展示方式，在网页设计或数据库应用中经常被使用。这个"省市二级联动Access版"指的是利用Microsoft Access数据库管理系统实现的一种功能，使得用户在选择省份时，下拉菜单会动态...

    省市二级联动代码JS

    标题中的“省市二级联动代码JS”指的是在网页开发中实现的一种交互功能，它允许用户在选择省份后，自动更新下拉菜单以显示对应省份的城市，从而实现两级联动的效果。这种功能通常用于地址输入或者区域筛选等场景，...

    jquery 省市二级联动

    一段很简单的代码实现的全国二级城市联动选择效果 代码部分很简单，看过即会使用 主要字段内容在city.data.js中，如果需要修改城市名称，到里面找到对应的文字修改，或者添加即可

    纯js省市县三级联动 附带邮编

    在IT开发中，尤其在构建Web应用时，经常会遇到用户需要选择地址的场景，这时候“省市县三级联动”功能就显得尤为重要。这个功能允许用户依次选择省份、城市和区县，形成一个完整的地址，通常还会包含对应的邮政编码...

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