当前位置： 代码迷 >> Web前端 >> 省地县的二级联动
  详细解决方案

省地县的二级联动

热度：290   发布时间：2012-11-07 09:56:10.0
省市县的二级联动
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

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.