用struts,jquery-easyui省市级联小例子

最新推荐文章于 2024-09-08 20:08:56 发布

iteye_4032

最新推荐文章于 2024-09-08 20:08:56 发布

阅读量121

点赞数

分类专栏： jquery 文章标签： java json 前端 ViewUI

本文链接：https://blog.csdn.net/iteye_4032/article/details/82246092

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1。运用的是jquery-easyui中combobox组件，前端展示引入jquery-1.7.1.min.js和
jquery.easyui.min.js包,直接看代码:
(1)前端html代码如下：


<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("path",basePath);
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="css/themes/icon.css">
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript">
         $(document).ready(function(){	 
           var province = $('#province').combobox({ 
             width:'100',
             url:'citys.do?param=queryProvince',
             valueField:'id',
             textField:'code',
             onSelect:function(record){ 
                 $('#city').combobox({ 
                     disabled:false, 
                     width:'100',
                     url:'citys.do?param=queryCityByProvinceId&parentid='+record.id, 
                     valueField:'id', 
                     textField:'name'
                 }).combobox('clear');
                 $("#province").combobox('setValue',record.name);
             } 
         }); 

          $('#city').combobox({ 
             disabled:true, 
             width:'100',
             url:'citys.do?param=queryCityByProvinceId&parentid='+province.val(),
             valueField:'id',
             textField:'name' 
         }); 
         });
</script>
  </head>

  <body>
    <center>
    <select id="province" name="province" class="easyui-combobox">
    </select>
     
     <select id="city" name="city" class="easyui-combobox">
    </select>

    </center>
  </body>
</html>

(2)Java代码，取得省份和相应的市，然后转换成JSON传到前端,如下：


public class CityAction  extends DispatchAction{

         /**

          取得所有省份
          */
	public ActionForward queryProvince(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {

		List<City> list = null;
		CityDAO citydao = new CityDAO();
		list = citydao.findProvince();
		JSONArray json=JSONArray.fromObject(list);
		response.setContentType("text/json; charset=utf-8"); 
		PrintWriter out=response.getWriter();  
		out.print(json);
		out.flush();
		return null;
	}
	/**
         取得相应省份的市.
         */
	public ActionForward queryCityByProvinceId(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		String parentid = request.getParameter("parentid");
		List<City> list = null;
		CityDAO citydao = new CityDAO();
		if(parentid!=null&&!parentid.equals("null")){
		list = citydao.findCity(Long.parseLong(parentid));
		}
		JSONArray json=JSONArray.fromObject(list);
		response.setContentType("text/json; charset=utf-8"); 
		PrintWriter out=response.getWriter();  
		out.print(json);
		out.flush();
		return null;
	}

}

iteye_4032

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用struts,jquery-easyui省市级联小例子

1。运用的是jquery-easyui中combobox组件，前端展示引入jquery-1.7.1.min.js和 jquery.easyui.min.js包,直接看代码: (1)前端html代码如下：[code="html"] My JSP 'index.jsp' starting page ...
复制链接

扫一扫

专栏目录