`
chinalhkboy
  • 浏览: 19281 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类

省市区/县 的下拉框(一)

阅读更多

jsp页面调用:

所在地区:<jsp:include flush="true" page="/common/city/selectCity.jsp" />

 

One

City实体

public class City {

	/**
	 * 标识 id
	 */
	private Integer id;

	/**
	 * 城市名 cityname
	 */
	private String cityname;

	/**
	 * 省份标识 parentid
	 */
	private Integer parentid;

	/**
	 * 城市类型 citycategory
	 */
	private Integer citycategory;

	/**
	 * 地区 areaid
	 */
	private Integer areaid;
	
	private String orderby; // 排序
	public String getOrderby()
	{
		if (orderby == null)
			orderby = " id ASC";
		return orderby;
	}
	public void setOrderby(String orderby) {
		this.orderby = orderby;
	}


	public Integer getId() {

		return id;
	}

	public void setId(Integer id) {
		this.id = id;
	}

	public String getCityname() {

		return cityname;
	}

	public void setCityname(String cityname) {
		this.cityname = cityname;
	}

	public Integer getParentid() {

		return parentid;
	}

	public void setParentid(Integer parentid) {
		this.parentid = parentid;
	}

	public Integer getCitycategory() {

		return citycategory;
	}

	public void setCitycategory(Integer citycategory) {
		this.citycategory = citycategory;
	}

	public Integer getAreaid() {

		return areaid;
	}

	public void setAreaid(Integer areaid) {
		this.areaid = areaid;
	}

}

 

Two:

用Serlvlet将City数据加入内存

 

public class CityServlet extends HttpServlet {

	public void init() {
		try {
			CityBiz cityBiz = (CityBiz) ContextConf.getContext().getBean("cityBiz");

			/**
			 * 把省加载到内存
			 */
			City city = new City();
			city.setParentid(0);
			List listProvince = cityBiz.search(city);
			this.getServletContext().setAttribute("listProvince", listProvince);

			/**
			 * 把市加载到内存
			 */
			for (int i = 0; i < listProvince.size(); i++) {
				City cityProvince = (City) listProvince.get(i);
				city.setParentid(cityProvince.getId());
				List listCity = cityBiz.search(city);
				this.getServletContext().setAttribute("listCity" + cityProvince.getId(), listCity);
				//把区/县加载到内存
				for(int j = 0 ; j < listCity.size() ; j++ ){
					City countyCity = (City)listCity.get(j);
					city.setParentid(countyCity.getId());
					List listCounty = cityBiz.search(city);
					this.getServletContext().setAttribute("listCity" + countyCity.getId(), listCounty);
				}
			}

		} catch (Exception e) {
			e.printStackTrace();
			System.out.println("城市加载内存失败");
		}

	}

}
 

Three:

Action

public class CityAction extends BaseAction {
private CityBiz cityBiz;
private City item;
private int parentid;					//父级城市
private List cityList;	


/**
 * 通过父类查询子类
 * */
public String getCityListByParentId()
{
	try
	{
		//声明所用的初始值
		getResponse().setCharacterEncoding("GBK");
		getResponse().setContentType("text/html; charset=GBK");	
		PrintWriter out = null;
		out=getResponse().getWriter();
		
		//查询数据库
		
		if(getParentid()==0)
		{
			cityList=(List)getRequest().getSession().getServletContext().getAttribute("listProvince");
		}
		else
		{
			cityList=(List)getRequest().getSession().getServletContext().getAttribute("listCity"+getParentid());
		}
		
		String resOut="";
		
		for(int i=0;i<cityList.size();i++)
		{
			item=(City)cityList.get(i);
			resOut=resOut+"<option value='"+item.getId()+"'>"+item.getCityname()+"</option>";
		}
		
		//输出所选项
		out.print(resOut);
		out.close();
		
		return null;
	}
	catch(Exception e)
	{
		e.printStackTrace();
		return "error";
	}
}

 

Four:

Spring、Struts 配置

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.org/dtd/spring-beans.dtd">
<beans>
<bean id="cityDao" class="com.dao.impl.CityDaoImpl">
	<property name="sqlMapClient" ref="sqlMapClient" />
</bean>
<bean id="cityBiz" class="com.biz.impl.CityBizImpl">
	<property name="cityDao" ref="cityDao" />
</bean>
<bean id="cityAction" class="com.action.CityAction">
	<property name="cityBiz" ref="cityBiz" />
</bean>
</beans>

 

<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
	<package name="city" extends="struts-default" namespace="/city">		
			<!--	根据父类id获取子类列表	-->
			<action name="getCityListByParentId" class="com.health2.ssi.action.CityAction" method="getCityListByParentId">
				<result name="success">/common/city/selectCity.jsp</result>
				<result name="error">/common/city/selectCity.jsp</result>
			</action>
	</package>	
</struts> 
 

Five:

selectCity.jsp

<%@ page language="java" contentType="text/html; charset=GBK" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<script type="text/javascript" src="/js/public/jquery.js"></script>
<script type="text/javascript" src="/js/public/city.js"></script>
<input type="hidden" id="provinceselectnameid" name="provinceselectname" value="0"/>
<input type="hidden" id="cityselectnameid" name="cityselectname" value="0"/>
<input type="hidden" id="provinceandcitynameid" name="provinceandcityname" value="0"/>

<input type="hidden" id="parentselectidper"  value="<s:property value="parentid"/>"/>
<input type="hidden" id="cityselectidper"  value="<s:property value="cityid"/>"/>

<select name="provincename" id="provincenameid">	
	<option value="0" selected="selected">请选择省</option>
	<s:iterator value="#application['listProvince']">
		<option value="<s:property value="id"/>"><s:property value="cityname"/></option>	
	</s:iterator>  
</select>省
<select name="cityname" id="citynameid">
	<option value="0" selected="selected">请选择市</option>
</select>市

 

Six:

city.js

$(document).ready(function(){

		//加载
		if($("#parentselectidper").val()>0)
		{
			$("#provincenameid").attr("value",$("#parentselectidper").val());//为省选中值
			if($("#parentselectidper").val()>0)
			{
				$.ajax({
				type: "POST",
				url: "/city/getCityListByParentId.do",
				processData:false,
				data: "parentid="+$("#parentselectidper").val(),	
				async: false,	  		 
				success: function(data){
					$("#provinceselectnameid").val($("#provincenameid").val());//设置省
					$("#provinceandcitynameid").val($("#provincenameid").val());//设置整体
					$("#citynameid").html('<option value="0" selected="selected">请选择市</option>'+data);
					
					if($("#cityselectidper").val()>0)
					{
						$("#citynameid").attr("value",$("#cityselectidper").val());//为市选中值
					}
					else
					{
						$("#citynameid").attr("value",0);//为市选中值
					}
				  }
				});  
			}
					
		}
		else
		{
			$("#provincenameid").attr("value",0);//为省选中值
		}

		//选择省		
		$("#provincenameid").change(function(){
			if($("#provincenameid").val()>0)
			{
				$.ajax({
				type: "POST",
				url: "/city/getCityListByParentId.do",
				processData:false,
				data: "parentid="+$("#provincenameid").val(),	
				async: false,	  		 
				success: function(data){
					$("#provinceselectnameid").val($("#provincenameid").val());//设置省
					$("#provinceandcitynameid").val($("#provincenameid").val());//设置整体
					$("#citynameid").html('<option value="0" selected="selected">请选择市</option>'+data);
				  }
				});  
			}
		});
		
		//选择市
		$("#citynameid").change(function(){
			$("#cityselectnameid").val($("#citynameid").val());//设置市			
			$("#provinceandcitynameid").val($("#citynameid").val());//设置整体
		});
});
 

 

 

 

分享到:
评论

相关推荐

    vue省市区/县数据js文件(citydata.js)

    首先,我们需要在组件的`data`选项中定义一个变量来存储所有省市区/县的数据,并在`mounted`生命周期钩子中加载`citydata.js`中的数据: ```javascript ...

    省市二级、省市县三级下拉框

    本主题聚焦于"省市二级、省市县三级下拉框",这是一种专为选择中国省级、市级以及县级行政区划而设计的jQuery下拉框插件。这种插件在构建具有地理定位功能的网站或应用时非常实用,例如在线购物平台、地图服务或配送...

    基于layui开发的省市区三级联动下拉框.zip

    本项目"基于layui开发的省市区三级联动下拉框"是一个典型的前端组件开发实例,它利用layui和vue.js来实现地理信息的三级联动选择功能。 首先,我们来了解一下layui。layui是一款中国本土的开源前端框架,它提供了...

    省市县三级联动下拉框

    标题 "省市县三级联动下拉框" 涉及到的是在Web开发中常见的一个功能需求,即在用户界面设计时实现省、市、县(区)三个层级的下拉菜单选择,通常用于地址填写或者区域筛选等场景。这种联动效果意味着当用户在一级...

    layui-省市县三级联动下拉框-HTML源码

    本文将详细介绍如何使用HTML、JavaScript(通常配合jQuery)以及可能涉及的CSS来实现"layui-省市县三级联动下拉框"的功能,并探讨其可扩展性。 首先,`layui`是一个流行的前端UI框架,它提供了一套美观、响应式的...

    jQuery省市区三级联动下拉框.zip

    在网页开发中,有时我们需要实现省市区三级联动的下拉框功能,这通常是用户填写地址信息时的一个常见需求。这个“jQuery省市区三级联动下拉框”是一个利用jQuery库实现的解决方案,它基于jQuery 1.8.2的迷你版本...

    jQuery实现select省市区三级联动下拉框.zip

    实现效果: jQuery实现select省市区三级联动下拉框,通过选择省,市区的值随之变化,非常适用于企业网站或者商城网站,用户在注册的时候填写的信息。php中文网推荐下载!

    这里是基于layui开发的省市区三级联动下拉框.zip

    本项目是基于layui框架实现的省市区三级联动下拉框,这是一个常见的前端表单元素,常用于地址选择或定位功能。layui是一款轻量级的前端组件库,它提供了丰富的UI组件,易于使用且性能优异,特别适合快速构建中大型...

    省市县/区下拉列表,同步改变

    在IT行业中,构建一个能够动态同步的省市县/区下拉列表是常见的需求,尤其在网页表单设计或地理信息处理中。这个功能的核心在于实现数据的联动更新,以提高用户体验并确保信息输入的准确性和一致性。在这个项目中,...

    jquery省市县联动下拉框

    在网页开发中,"jQuery省市县联动下拉框"是一个常见的功能需求,它主要用于实现用户在选择省份时,对应的市和县下拉框能够自动更新,提供与所选省份匹配的选项。这种交互设计可以极大地提升用户体验,尤其在处理大量...

    jQuery弹出式下拉框省市区三级联动地区选择插件

    "jQuery弹出式下拉框省市区三级联动地区选择插件"就是为了满足这一需求而设计的。这个插件利用jQuery库的强大功能,实现了省市区三级联动的效果,即用户在选择省份后,下拉框会自动更新出对应省份的城市列表,进一步...

    js省市县下拉框联动

    在网页开发中,"js省市县下拉框联动"是一个常见的功能需求,特别是在构建具有地域选择功能的网站或Web应用时。这个功能允许用户通过级联的下拉菜单选择省份、城市和县(区),为用户提供简洁且高效的交互体验。在本...

    利用百度地图开源数据构建省市区三级联动下拉框

    在IT行业中,构建一个省市区三级联动的下拉框是一个常见的需求,特别是在Web开发中,例如用户填写地址信息时。这种功能可以提供便捷的交互体验,让用户快速选择正确的地理位置信息。本篇将介绍如何利用百度地图的...

    省市区选择下拉实现

    "省市区选择下拉实现"是一个常见的功能需求,它通常通过JavaScript、jQuery或者现代前端框架如Vue.js、React.js等来实现。此功能旨在提供用户友好的界面,方便他们快捷地从预设的省市区数据中进行选择。 在实现这个...

    ul li 模拟省市区下拉框

    在网页开发中,为了提供更好的用户体验,我们常常需要模拟出具有层级关系的...以上就是“ul li 模拟省市区下拉框”的相关知识点,它涉及到前端UI设计、数据处理、事件驱动编程等多个方面,是网页开发中的一个重要技能。

    JS+XML 省市区 三级联动下拉框

    在网页开发中,"JS+XML 省市区 三级联动下拉框"是一种常见的交互设计,用于用户选择他们的地理位置,如省、市、区。这个功能通常在注册、填写地址等场景中出现,能够提供良好的用户体验,因为它使得用户可以通过简单...

    qt 定制省市区三级选择框

    在Qt开发中,有时我们需要创建一个用户界面,其中包含能够选择省市区三级信息的组件。这个组件通常以组合框(ComboBox)的形式出现,允许用户逐级选择省份、城市和区县。本文将深入探讨如何使用Qt 5.9版本,并结合...

    JS本地实现全国省市区二级、三级地址下拉框联动选择

    全国省市区地址下拉框二级、三级联动选择html例子,JS本地实现,无需网络就能使用,数据为国家省市区6位标准编码,二级联动为省、市的下拉框选择,三级联动为省、市、区的下拉框选择,效果请打开压缩包中的html页面...

    AJAX版省市区三级联动下拉框

    在IT领域,"AJAX版省市区三级联动下拉框"是一种常见的前端交互设计,尤其在网站表单中,用于用户选择地理位置时。这个技术基于AJAX(Asynchronous JavaScript and XML),它允许网页在不刷新整个页面的情况下与...

    用JQURRY编写以XML为数据源的省市区三级下拉框选择器

    在网页开发中,有时我们需要创建一个能够展示省市区三级联动的下拉选择器,以便用户可以方便地选择他们的地理位置。本教程将详细讲解如何利用jQuery和XML数据源来实现这样一个功能,尤其适用于天气查询等场景。 ...

Global site tag (gtag.js) - Google Analytics