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

本文介绍了如何使用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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值