JSP部分代码
<script src="/js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script>
//为了避免jquery中的'$'与其它的'$'冲突,在此将jquery中的'$'重命名为'jQuery'
var jQuery=$;
</script>
<script>
//初始化数据
jQuery(document).ready(function(){
getProvince();
});
//取所有省份
function getProvince(){
//&callback=?"注意这个是为了解决跨域访问的问题
var url ="<%=request.getContextPath() %>/getAreaJSON?areaId=0&callback=?";
jQuery.getJSON(url,null,function call(result){
setProvince(result);
});
//显示或隐藏激活卡
jQuery("#actionCardChk").click(function(){
if(jQuery("#actionCardChk").attr("checked")==true){
jQuery("#actionCardDiv").show();
}else{
jQuery("#actionCardDiv").hide();
}
});
//显示或隐藏新增常用地址
jQuery("#addressChk").click(function(){
if(jQuery("#addressChk").attr("checked")==true){
jQuery("#addressDiv").show();
}else{
jQuery("#addressDiv").hide();
}
});
}
//设置省份
function setProvince(result){
var province = document.getElementById("toProvince");
jQuery.each(result.data, function(i, area){
var value = area.id;
var text = area.name;
var option = new Option(text,value);
province.options.add(option);
});
}
//按上级ID取子地区
function getArea(name){
if( name=='city' ){
clearSel(document.getElementById("toCity")); //清空城市
var province = document.getElementById("toProvince");
if(province.options[province.selectedIndex].value == "") return;
var areaId = province.options[province.selectedIndex].value;
var url ="<%=request.getContextPath() %>/getAreaJSON?areaId="+areaId+"&callback=?";
jQuery.getJSON(url,null,function call(result){
setCity(result);
});
}else if( name=='county'){
clearSel(document.getElementById("toCounty")); //清空城区
var city = document.getElementById("toCity");
if(city.options[city.selectedIndex].value == "") return;
var areaId = city.options[city.selectedIndex].value;
var url ="<%=request.getContextPath() %>/getAreaJSON?areaId="+areaId+"&callback=?";
jQuery.getJSON(url,null,function call(result){
setCounty(result);
});
}
}
//当改变省份时设置城市
function setCity(result){
var city = document.getElementById("toCity");
jQuery.each(result.data, function(i, area){
var value = area.id;
var text = area.name;
var option = new Option(text,value);
city.options.add(option);
});
}
//当改变省份时设置城市
function setCounty(result){
var county = document.getElementById("toCounty");
jQuery.each(result.data, function(i, area){
var value = area.id;
var text = area.name;
var option = new Option(text,value);
county.options.add(option);
});
}
// 清空下拉列表
function clearSel(oSelect){
while(oSelect.childNodes.length>0){
oSelect.removeChild(oSelect.childNodes[0]);
}
}
</script>
<tr>
<td height="28" colspan="3">
<select name="toProvince" id="toProvince" onChange="getArea('city')" class="STYLE5" onFocus="doOnFocus(this);">
<option value="" selected>请选择省份...</option>
</select>
</td>
</tr>
<tr>
<td height="28" colspan="3">
<select name="toCity" id="toCity" class="board" onChange="getArea('county')" onFocus="doOnFocus(this);">
<option value="">请选择城市...</option>
</select>
</td>
</tr>
<tr>
<td class="STYLE3">
<select name="toCounty" id="toCounty" class="board" onfocus="doOnFocus(this);">
<option value="">请选择城区...</option>
</select>
</td>
</tr>
JAVA部分代码 Servlet
response.setContentType("text/xml;charset=utf-8");
response.setHeader("Pragma","No-cache");
response.setDateHeader("Expires",0);
response.setHeader("Cache-Control","no-cache");
PrintWriter out=response.getWriter();
String areaId = request.getParameter("areaId");
if(areaId==null || areaId.trim().length()<=0){
//sb.append("<data><error>系统错误地区id为空</error></data>");
//out.print(sb.toString());
return;
}
//注意这个是为了解决跨域访问的问题
String callback = request.getParameter("callback");
try {
List areaList = AreaService.getInstance().getAreasByParentId(Integer.parseInt(areaId));
// 取集合
JSONArray jsonArray = JSONArray.fromObject(areaList);
JSONObject jsobjcet = new JSONObject();
jsobjcet.put("data", jsonArray);
response.getWriter().write(callback+"("+jsobjcet.toString()+");");
log.info(callback+"("+jsobjcet.toString()+");");
} catch (IOException e) {
e.printStackTrace();
}
DAO部分代码
public List getAreasByParentId(int parentId) {
Connection conn=null;
Statement stm=null;
ResultSet rs=null;
List<AreaInfo> list = new ArrayList<AreaInfo>();
try{
conn = ConnectionPool.getConnection();
if( conn == null ) throw new Exception("DataBase connection error");
stm = conn.createStatement();
String sql ="select * from n_area where parent_id =" + parentId;
rs = stm.executeQuery(sql);
AreaInfo areaInfo = null;
while( rs.next() ) {
areaInfo= new AreaInfo();
areaInfo.setId(rs.getInt("id"));
areaInfo.setName(rs.getString("name"));
areaInfo.setParentId(rs.getInt("parent_id"));
list.add(areaInfo);
}
}catch(Exception e){
log.error("getAreasByParentId() error:"+e.getMessage());
}finally{
ConnectionPool.release(conn,stm,rs); //释放资源
}
return list;
}
数据表结构
CREATE TABLE n_area (
id int(11) NOT NULL,
name varchar(20) ,
parent_id int(11),
)
记录
INSERT INTO n_area VALUES ('180', '内蒙古', '0');
INSERT INTO n_area VALUES ('181', '呼和浩特', '180');
INSERT INTO n_area VALUES ('182', '吉林省', '0');
INSERT INTO n_area VALUES ('183', '新疆省', '0');
INSERT INTO n_area VALUES ('184', '新疆', '183');
INSERT INTO n_area VALUES ('185', '吉林市', '182');
INSERT INTO n_area VALUES ('215', '其他地区', '213');
INSERT INTO n_area VALUES ('187', '其他地区', '1');
INSERT INTO n_area VALUES ('188', '其他地区', '30');
INSERT INTO n_area VALUES ('189', '其他地区', '31');
INSERT INTO n_area VALUES ('190', '其他地区', '32');
INSERT INTO n_area VALUES ('191', '其他地区', '33');
INSERT INTO n_area VALUES ('192', '其他地区', '34');
INSERT INTO n_area VALUES ('193', '其他地区', '35');
INSERT INTO n_area VALUES ('194', '其他地区', '36');
INSERT INTO n_area VALUES ('195', '其他地区', '37');
INSERT INTO n_area VALUES ('196', '其他地区', '38');
INSERT INTO n_area VALUES ('197', '其他地区', '39');
INSERT INTO n_area VALUES ('198', '其他地区', '40');
INSERT INTO n_area VALUES ('199', '其他地区', '41');
INSERT INTO n_area VALUES ('200', '其他地区', '42');
INSERT INTO n_area VALUES ('201', '其他地区', '43');
INSERT INTO n_area VALUES ('202', '其他地区', '44');
INSERT INTO n_area VALUES ('203', '其他地区', '94');
INSERT INTO n_area VALUES ('204', '其他地区', '136');
INSERT INTO n_area VALUES ('205', '其他地区', '178');
INSERT INTO n_area VALUES ('206', '其他地区', '180');
INSERT INTO n_area VALUES ('207', '其他地区', '182');
INSERT INTO n_area VALUES ('214', '拉萨', '213');
INSERT INTO n_area VALUES ('210', '其他地区', '45');
INSERT INTO n_area VALUES ('211', '其他地区', '46');
INSERT INTO n_area VALUES ('212', '其他地区', '86');
INSERT INTO n_area VALUES ('220', '新三区', '184');
INSERT INTO n_area VALUES ('219', '新二区', '184');
INSERT INTO n_area VALUES ('221', '天河区', '4');
INSERT INTO n_area VALUES ('222', '越秀区', '4');
INSERT INTO n_area VALUES ('223', '海珠区', '4');
附件中有相应的jar包
json-lib-2.1-jdk15.jar 是主要的
相关推荐
NULL 博文链接：https://huigege.iteye.com/blog/1852954
ajax 实现 (全国,省,是,区....) N级联 Demo js: <script type="text/javascript"> $(function () { $.fn.CascadeSelect({ url: '/CascadeSelect/CascadeSelect.ashx', //返回Json数据的一般处理文件 idKey: ...
下面小编就为大家分享一篇使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
1、Jsp页面 ... //为了避免jquery中的'$'与其它的'$'冲突,在此将jquery中的'$'重命名为'jQuery' var jQuery=$; //初始化数据 jQuery(document).ready(function(){ getProvince(); });
这是将《用Ajax实现多级联动下拉列表（无限级别，JSON传输数据，含全国地区数据库））》（原来是asp的）改写成ASP.NET,服务器端采用WebService。仍然使用JSON传数据。原文地址：...
Ajax与ASP网页交互动态添加删除数据一例 Asp+Ajax无限级联动下拉框菜单Access版 ASP 树形菜单TreeView 多样式版 Ajax仿iGoogle双击编辑、网页拖动完整实例 ASP+jQuery无刷新读写数据库操作 Ajax提交数据实例_Ajax+...
本文实例讲述了jQuery ajax+PHP实现的级联下拉列表框功能。分享给大家供大家参考，具体如下： 一 代码 fun.js： // JavaScript Document $(document).ready( function(){ $.get(returnpc.php?flag=p, null, ...
省市区联动下拉效果在WEB中应用非常广泛，尤其在一些会员信息系统、电商网站最为常见。开发者一般使用Ajax实现无刷新下拉联动。本文将讲述，利用jQuery插件，通过读取JSON数据，实现无刷新动态下拉省市
只要实现下拉框的无刷新三级联动效果，使用vs2008+sqlserver2005 实现
其它的都不说，使用easyui实现三级联动主要就是一层套一层，大家且看代码 html表单 <input id="txtPipeRowName" style="width:150px;"> <input id="txtPipeName" style="width:150px;"> easyUi的...
主要为大家详细介绍了基于jQuery Ajax实现下拉框无刷新联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
纯净SSM简单整合，数据库资源根据实体类自己创建。内有ssm增删改查，ajax结合jquery做下拉框，省市联动，多选框等。所有jar包都放在lib里，搭好数据库完美可用。供新手学习。
功能：省，市，地区三级联动，采用jquery ajax 取数据绑定，页面刷新或提交后选定值能保存并保持选中状态 把以下代码放在一个单独的js文件中，在页面上引用即可调用 代码如下://获取cookie值function readCookie...
资源名称：下拉框实用源码大全资源目录：【】Ajax【】ajaxjsp二级联动下拉框【】ajax实现无刷新查询【】Ajax异步【】AJAX版省市区三级联动下拉框【】CSS jQuery个性化的下拉框效果【】jquery css多选项下拉框特效...
jquery Ajax实现Select动态添加数据，具体内容如下 1.背景 最近在工作中，遇到了一个关于select的问题。一般情况下，select下拉框中的数据都是固定的或者直接在jsp中读取列表值显示。但是，这次要实现select与别的...