省市县的二级联动

<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>

 

 

 

$(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"
	    );
	});
});

 

 

 

 

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;
	}

}

 

 

 

public class AreaLinkageDao {

	/**
	 * 根据省ID查询城市信息
	 * 
	 * @param parameter
	 * @param servletContext
	 * @return
	 */
	public List areaLinkage(String provinceId, ServletContext servletContext)
			throws Exception {
		RootDaoInterface rootDao = (RootDaoInterface) DataSourceHelper
				.getDaoInterfae(servletContext);
		String sql = "select id,city_code,city_name from tb_area_city where pid = ?";
		return rootDao.preparedQuery(sql, new String[] { provinceId });
	}

}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值