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());//设置整体
});
});
分享到:
相关推荐
首先,我们需要在组件的`data`选项中定义一个变量来存储所有省市区/县的数据,并在`mounted`生命周期钩子中加载`citydata.js`中的数据: ```javascript ...
本主题聚焦于"省市二级、省市县三级下拉框",这是一种专为选择中国省级、市级以及县级行政区划而设计的jQuery下拉框插件。这种插件在构建具有地理定位功能的网站或应用时非常实用,例如在线购物平台、地图服务或配送...
本项目"基于layui开发的省市区三级联动下拉框"是一个典型的前端组件开发实例,它利用layui和vue.js来实现地理信息的三级联动选择功能。 首先,我们来了解一下layui。layui是一款中国本土的开源前端框架,它提供了...
标题 "省市县三级联动下拉框" 涉及到的是在Web开发中常见的一个功能需求,即在用户界面设计时实现省、市、县(区)三个层级的下拉菜单选择,通常用于地址填写或者区域筛选等场景。这种联动效果意味着当用户在一级...
本文将详细介绍如何使用HTML、JavaScript(通常配合jQuery)以及可能涉及的CSS来实现"layui-省市县三级联动下拉框"的功能,并探讨其可扩展性。 首先,`layui`是一个流行的前端UI框架,它提供了一套美观、响应式的...
在网页开发中,有时我们需要实现省市区三级联动的下拉框功能,这通常是用户填写地址信息时的一个常见需求。这个“jQuery省市区三级联动下拉框”是一个利用jQuery库实现的解决方案,它基于jQuery 1.8.2的迷你版本...
实现效果: jQuery实现select省市区三级联动下拉框,通过选择省,市区的值随之变化,非常适用于企业网站或者商城网站,用户在注册的时候填写的信息。php中文网推荐下载!
本项目是基于layui框架实现的省市区三级联动下拉框,这是一个常见的前端表单元素,常用于地址选择或定位功能。layui是一款轻量级的前端组件库,它提供了丰富的UI组件,易于使用且性能优异,特别适合快速构建中大型...
在IT行业中,构建一个能够动态同步的省市县/区下拉列表是常见的需求,尤其在网页表单设计或地理信息处理中。这个功能的核心在于实现数据的联动更新,以提高用户体验并确保信息输入的准确性和一致性。在这个项目中,...
在网页开发中,"jQuery省市县联动下拉框"是一个常见的功能需求,它主要用于实现用户在选择省份时,对应的市和县下拉框能够自动更新,提供与所选省份匹配的选项。这种交互设计可以极大地提升用户体验,尤其在处理大量...
"jQuery弹出式下拉框省市区三级联动地区选择插件"就是为了满足这一需求而设计的。这个插件利用jQuery库的强大功能,实现了省市区三级联动的效果,即用户在选择省份后,下拉框会自动更新出对应省份的城市列表,进一步...
在网页开发中,"js省市县下拉框联动"是一个常见的功能需求,特别是在构建具有地域选择功能的网站或Web应用时。这个功能允许用户通过级联的下拉菜单选择省份、城市和县(区),为用户提供简洁且高效的交互体验。在本...
在IT行业中,构建一个省市区三级联动的下拉框是一个常见的需求,特别是在Web开发中,例如用户填写地址信息时。这种功能可以提供便捷的交互体验,让用户快速选择正确的地理位置信息。本篇将介绍如何利用百度地图的...
"省市区选择下拉实现"是一个常见的功能需求,它通常通过JavaScript、jQuery或者现代前端框架如Vue.js、React.js等来实现。此功能旨在提供用户友好的界面,方便他们快捷地从预设的省市区数据中进行选择。 在实现这个...
在网页开发中,为了提供更好的用户体验,我们常常需要模拟出具有层级关系的...以上就是“ul li 模拟省市区下拉框”的相关知识点,它涉及到前端UI设计、数据处理、事件驱动编程等多个方面,是网页开发中的一个重要技能。
在网页开发中,"JS+XML 省市区 三级联动下拉框"是一种常见的交互设计,用于用户选择他们的地理位置,如省、市、区。这个功能通常在注册、填写地址等场景中出现,能够提供良好的用户体验,因为它使得用户可以通过简单...
在Qt开发中,有时我们需要创建一个用户界面,其中包含能够选择省市区三级信息的组件。这个组件通常以组合框(ComboBox)的形式出现,允许用户逐级选择省份、城市和区县。本文将深入探讨如何使用Qt 5.9版本,并结合...
全国省市区地址下拉框二级、三级联动选择html例子,JS本地实现,无需网络就能使用,数据为国家省市区6位标准编码,二级联动为省、市的下拉框选择,三级联动为省、市、区的下拉框选择,效果请打开压缩包中的html页面...
在IT领域,"AJAX版省市区三级联动下拉框"是一种常见的前端交互设计,尤其在网站表单中,用于用户选择地理位置时。这个技术基于AJAX(Asynchronous JavaScript and XML),它允许网页在不刷新整个页面的情况下与...
在网页开发中,有时我们需要创建一个能够展示省市区三级联动的下拉选择器,以便用户可以方便地选择他们的地理位置。本教程将详细讲解如何利用jQuery和XML数据源来实现这样一个功能,尤其适用于天气查询等场景。 ...