使用Jquery写的一个省份和城市的级联

最新推荐文章于 2022-07-25 22:50:55 发布

canofy

最新推荐文章于 2022-07-25 22:50:55 发布

阅读量426

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax 文章标签： jQuery json Ajax C++ C ViewUI

本文链接：https://blog.youkuaiyun.com/canofy/article/details/83633001

ajax 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用jQuery、Ajax和JSON在前端实现省份和城市的级联选择。鉴于项目中省份和城市数据的动态性及后台数据交互的复杂性，作者选择了自定义解决方案。首先，后台以JSON格式准备数据并传递到前端；接着，前端解析JSON数据并通过jQuery的Ajax请求获取；最后，利用onchange事件动态更新城市选择。代码示例包括后台Servlet和前端JSP页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发原因：
1、由于所进行的项目中的省份和城市并不是中国所有的省份和市，并且很有可能随着时间的推移数据发生变化，因此整个省份和城市数据存在数据库中保存。
2、由于使用了公司集成的一套东西，在涉及到这类下拉框时的修改回显数据时会比较困难，公司的那套东西了解的比较少，并且也不允许我们去修改它的东西。
基于上面两个情况，决定自己写一个。
思路：
1、后台把数据准备好，省份和城市的级联关系
2、把数据以json方式传到前台
3、前台对json形式的数据进行解析
4、前台通过jquery的ajax进行请求json数据
5、当选择省份显示相应的城市的时候使用select的onchange事件
6、把后台返回的数据通过eval转换为javascript中的json数据
大体上就这些吧
下面是所有的代码
首先是后台的代码，需要添加的包
[img]http://dl.iteye.com/upload/attachment/253617/77cab900-bbba-3445-9b52-3710fee701cc.jpg[/img]

下面是一个servlet，主要是准备数据，并和前台进行传输数据：


package com.demo;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

public class TestJsonServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	public void doGet(HttpServletRequest request,HttpServletResponse response){
		response.setContentType("text/plain");
		response.setCharacterEncoding("utf-8");
		List list = new ArrayList();
		//转换Array
		BaseAreaInfo a=new BaseAreaInfo();
        a.setArea_code("010");
        a.setArea_name("北京");
        a.setParent_area_code("NULL");
        list.add(a);
        BaseAreaInfo b=new BaseAreaInfo();
        b.setArea_code("021");
        b.setArea_name("上海");
        b.setParent_area_code("NULL");
        list.add(b);
        BaseAreaInfo c=new BaseAreaInfo();
        c.setArea_code("023");
        c.setArea_name("四川");
        c.setParent_area_code("NULL");
        c.setSubAreaList(new ArrayList());
        BaseAreaInfo c1=new BaseAreaInfo();
        c1.setArea_code("028");
        c1.setArea_name("成都");
        c1.setParent_area_code("023");
        c.getSubAreaList().add(c1);
        BaseAreaInfo c2=new BaseAreaInfo();
        c2.setArea_code("0826");
        c2.setArea_name("广安");
        c2.setParent_area_code("023");
        c.getSubAreaList().add(c2);
        BaseAreaInfo c3=new BaseAreaInfo();
        c3.setArea_code("0829");
        c3.setArea_name("南充");
        c3.setParent_area_code("023");
        c.getSubAreaList().add(c3);

        list.add(c);
	    //list.add(new TestBean());
        System.out.println("---");
	    //转换List
	    JSONArray jsonList = JSONArray.fromObject(list);   
		try {
			PrintWriter out = response.getWriter();
			out.println(jsonList.toString());
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

	}

	public void doPost(HttpServletRequest request,HttpServletResponse response){
		this.doGet(request, response);
	}
}

下面的代码是前面的sevlert使用的地区的类：


package com.demo;

import java.util.List;

public class BaseAreaInfo {
    private String area_code;
    private String area_name;
    private String parent_area_code;
    private List subAreaList;

    /**
     * @return the area_code
     */
    public String getArea_code() {
        return area_code;
    }
    /**
     * @param area_code the area_code to set
     */
    public void setArea_code(String area_code) {
        if(area_code!=null){
            this.area_code = area_code.trim();
        }else{
            this.area_code = area_code;
        }        
    }
    /**
     * @return the area_name
     */
    public String getArea_name() {
        return area_name;
    }
    /**
     * @param area_name the area_name to set
     */
    public void setArea_name(String area_name) {
        if(area_code!=null){
            this.area_name = area_name.trim();
        }else{
            this.area_name = area_name;
        }  
    }
    /**
     * @return the parent_area_code
     */
    public String getParent_area_code() {
        return parent_area_code;
    }
    /**
     * @param parent_area_code the parent_area_code to set
     */
    public void setParent_area_code(String parent_area_code) {
        if(parent_area_code!=null){
            this.parent_area_code = parent_area_code.trim();
        }else{
            this.parent_area_code = parent_area_code;
        }  
    }
    /**
     * @return the subAreaList
     */
    public List getSubAreaList() {
        return subAreaList;
    }
    /**
     * @param subAreaList the subAreaList to set
     */
    public void setSubAreaList(List subAreaList) {
        this.subAreaList = subAreaList;
    }


}

下面是前台展示的jsp页面，其实完全可以是一个html页面：


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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>testAjax</title>
	<script type="text/javascript" src="jquery.js" language="javascript"></script>
  </head>
  <script type="text/javascript" language="javascript">
  /*********************************************************
  *
  *             省份的级联JS,必须联合起来使用
  *             showProvince(bankCountry,provinceParam,isEdit)
  *             showCity(cityParam,isEdit)
  *  在需要显示的地方里写下代码：
  *     省份的代码：<div id="provinces"></div>
  *     城市的代码：<div id="citys"></div>
  *
  *生成的省份的下拉框(select)为ID为provinceSelect
  *生成的城市的下拉框(select)为ID为citySelect
  *
  *********************************************************/
  var jsonDatas;//身份数据
      /**
      * 从后台获取数据
      **/
      function acquireData(){
          if(jsonDatas==undefined){
           $.ajax({
               type:"POST",
               url:"/JqueryDemo/testJson",
               async:false,
               success:function(data){                 
                   jsonDatas=eval(data);
               }            
            });  
          }       
      }

      /****************************************************
      *     获取省份的下拉框
      * bankCountry 国家
      * provinceParam 用来回显的省份代码
      * isEdit 是否允许编辑,0为不允许，1为允许
      ******************************************************/
      function getProvinceSelect(bankCountry,provinceParam,isEdit){
          acquireData();

          var province_select="<select id='provinceSelect' ";
          if(isEdit!=undefined && !isEdit){
              province_select=province_select+" disabled "
          }
          province_select=province_select+" onchange='showCity()'><option value='0'>---请选择---</option>";
          if(bankCountry=="china"){
              for(var i=0;i<jsonDatas.length;i++){
                  var province=jsonDatas[i];  //省份信息
                  province_select=province_select+"<option value='"+province.area_code+"' "
                  if(provinceParam==province.area_code){
                      province_select=province_select+" selected "
                  }
                  province_select=province_select+" >"+province.area_name+"</option>";
              }
          }
          province_select=province_select+"</select> ";
          return province_select;
      }
      /****************************************************
      *   获取城市的下拉框
      * provinceParam 这是用来做级联的，传入省份的代码
      * cityParam 用来回显的城市代码
      * isEdit 是否允许编辑,0为不允许，1为允许
      ******************************************************/
      function getCitySelect(provinceParam,cityParam,isEdit){
          acquireData();
          var city_select="<select id='citySelect' ";       
          if(isEdit!=undefined && !isEdit){
              city_select=city_select+" disabled "
          }
          city_select=city_select+" ><option value='0'>---请选择---</option>"
          for(var i=0;i<jsonDatas.length;i++){
              var province=jsonDatas[i];  //省份信息
              province_name=province.area_name;
              province_code=province.area_code;
              if(provinceParam==province_code){
                  for(var j=0;j<province.subAreaList.length;j++){//城市信息               
                      city=province.subAreaList[j];
                      city_select=city_select+"<option value='"+city.area_code+"' ";
                      if(cityParam==city.area_code){
                          city_select=city_select+" selected "
                      }
                      city_select=city_select+ " >"+city.area_name+"</option>";
                  }
              }
          }
          city_select=city_select+"</select> ";
          return city_select;
      }
       /****************************************************
      *     获取省份的下拉框
      * bankCountry 国家,目前只有china
      * provinceParam 用来回显的省份代码
      * isEdit 是否允许编辑,0为不允许，1为允许
      ******************************************************/
      function showProvince(bankCountry,provinceParam,cityParam,isEdit){
          if(bankCountry==undefined){
              bankCountry="china";
          }
          var province_select=getProvinceSelect(bankCountry,provinceParam,isEdit);
          var city_select=getCitySelect(provinceParam,cityParam,isEdit);
          var showStr=$("#provinceSelect").text();
          $("#provinces").html("");
          $("#citys").html("");
          $("#provinces").append(province_select);        
          $("#citys").append(city_select);
          if(showStr!=''){
              //在showStr里有值的时候为什么不走这个方法呢
              //$("#show").append(province_select);       
              //$("#show").append(city_select);
          }else{              
              //$("#provinces").append(province_select);        
              //$("#citys").append(city_select);
          }
      }

       /****************************************************
      *   获取城市的下拉框
      * cityParam 用来回显的城市代码
      * isEdit 是否允许编辑,0为不允许，1为允许
      ******************************************************/
      function showCity(cityParam,isEdit){      
          var provinceParam=$('#provinceSelect option:selected').val(); 
          var city_select=getCitySelect(provinceParam,cityParam,isEdit);
          //显示城市时需要把城市的select清空，再添加
          $("#citys").html("");
          $("#citys").append(city_select);
      }

  	function getJsonObj(){
  		/*
  		var province_select="<select id='province'>";
  		for(var i=0;i<jsonDatas.length;i++){
	  		var province=jsonDatas[i];  //省份信息
	  		province_select=province_select+"<option value='"+province.area_code+"'&gt"+province.area_name+"</option>";
            province_name=province.area_name;
            province_code=province.area_code;
            for(var j=0;j<province.subAreaList.length;j++){//城市信息
                city=province.subAreaList[j];
                city_name=city.area_name;
                city_code=city.area_code;
				//alert(city_name);
            }
        }

  		$.getJSON( //使用getJSON方法取得JSON数据
  				"/JqueryDemo/testJson",
  				'',
  		        function(data){ //处理数据 data指向的是返回来的JSON数据
  					jsonDatas=data;
	  	  		    for(var i=0;i<data.length;i++){ 
		  	  		   var province=data[i];  
	                   alert(province.subAreaList.length);
	                   $("#show").html(province.area_name);
	                   for(var j=0;j<province.subAreaList.length;j++){
		                   city=province.subAreaList[j];
						   alert(city.area_name)
	                   }
	  	         	}
	  	         	alert(jsonDatas);
  		        }
  		  )
  		  */
  	}
  </script>
  <body onload="showProvince()">
  <h1>Test</h1>
    <div id="provinces"></div>
    <div id="citys"></div>
    <div id="content">
    	<input type="text" id="companyCode" name="companyCode" value="" />
    </div>
    <div>
    	<input type="button" name="button" value="调用方法" onClick="showProvince()">
    </div>
    <div>
    	<select id='testSelect' onchange="showCity()">
    		<option value='aaa' >aaa</option>
    		<option value='023' ">bbb</option>
    	</select>
    </div>
  </body>
</html>