jquery 实现二级/三级/多级联动菜单的思路及代码


Posted in Javascript onApril 08, 2013

本文介绍使用jQuery的AJAX功能和asp.net来实现省市区的三级联动效果,其他二级、三级或多级联动也可以按照此方法完成。

文章中涉及到的数据表为City,为方便管理。

设计此表如下
ID:自增长字段
City_Name:城市名称
City_Code:城市代码
我们根据城市代码来查询省、市、区。城市代码结构大致如下:
内蒙古:150000,呼和浩特:150100,新城区:150101。
其他地区代码与此一样,省级为省级编号+0000,市级为省级编号+市级编号+00,地区为省级编号+市级编号+地区编号。

City.ASPX代码为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>jQuery + ASP.NET实现三级联动</title> 
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<style type="text/css"> 
#dpCity{ display:none; position:relative;} 
#dpArea{ display:none;position:relative;} 
</style> 
</head> 
<body> 
<div> 
省:<asp:DropDownList ID="dpProvince" runat="server"></asp:DropDownList>   
市:<asp:DropDownList ID="dpCity" runat="server"></asp:DropDownList>   
区:<asp:DropDownList ID="dpArea" runat="server"></asp:DropDownList> 
</div> 
</body> 
</html>

JS代码
jQuery(document).ready(function () { 
var dp1 = jQuery("#dpProvince"); 
var dp2 = jQuery("#dpCity"); 
var dp3 = jQuery("#dpArea"); 
//填充省的数据 
loadAreas("", "dpProvince"); 
//给省绑定事件,触发事件后填充市的数据 
jQuery(dp1).bind("change keyup", function () { 
var provinceID = dp1.attr("value"); 
loadAreas(provinceID, "dpCity"); 
dp2.fadeIn("slow"); 
}); 
//给市绑定事件,触发事件后填充区的数据 
jQuery(dp2).bind("change keyup", function () { 
var cityID = dp2.attr("value"); 
loadAreas(cityID, "dpArea"); 
dp3.fadeIn("slow"); 
}); 
}); 
function loadAreas(val, item) { 
jQuery.ajax({ 
type: "post", 
url: "CityLoader.asmx/GetCityList", 
data: { 
code: val, 
a: Math.random() 
}, 
error: function () { 
return false; 
}, 
success: function (data) { 
var i; 
var json = eval(data); 
jQuery("#" + item).append("<option value='' selected='selected'>请选择</option>"); 
for (i = 0; i < json.length; i++) { 
jQuery("#" + item).append(jQuery("<option></option>").val(json[i].c_code).html(json[i].c_name)); 
}; 
} 
}); 
}

后台代码
//实例类 
public class CityModel 
{ 
int _id; 
string _cityname; 
string _citycode; 
public int ID 
{ 
set { _id = value; } 
get { return _id; } 
} 
public string CityName 
{ 
set { _cityname = value; } 
get { return _cityname; } 
} 
public string CityCode 
{ 
set { _citycode = value; } 
get { return _citycode; } 
} 
} 
//DAL层,返回DataTable,使用通用SqlHelper 
public DataTable CityList(string pcode) 
{ 
string SQL = "SELECT * FROM city WHERE 1=1"; 
if (!string.IsNullOrEmpty(pcode)) 
{ 
if (pcode.Substring(2, 2) != "00") 
{ 
SQL = SQL + " AND RIGHT(citycode,2)<>'00' AND LEFT(citycode,4)=LEFT(@pcode,4)"; 
} 
else 
{ 
SQL = SQL + " AND RIGHT(citycode,2)='00' AND LEFT(RIGHT(citycode,4),2)<>'00' AND LEFT(citycode,2)=LEFT(@pcode,2)"; 
} 
} 
else 
{ 
SQL = SQL + " AND LEFT(citycode,2)<>'00' AND RIGHT(citycode,4)='0000'"; 
} 
SQL = SQL + " ORDER BY sorts ASC"; 
SqlParameter[] Param ={ 
new SqlParameter("@pcode",pcode) 
}; 
using (SqlConnection conn = new SqlConnection(DBUtility.SqlHelper.ConnectionStringLocalTransaction)) 
{ 
DataSet ds = DBUtility.SqlHelper.ExecuteDataSet(conn, CommandType.Text, SQL, Param); 
return ds.Tables[0]; 
} 
} 
//BLL层,返回City的泛型列表 
public List<CityModel> CityList(string code) 
{ 
List<CityModel> list = new List<CityModel>(); 
DAL. CityDAL cd = new DAL.CityDAL(); 
DataTable dt = cd.CityList(code); 
if (dt.Rows.Count > 0) 
{ 
for (int i = 0; i < dt.Rows.Count; i++) 
{ 
CityModel cm = new CityModel(); 
cm.ID = int.Parse(dt.Rows[i]["id"].ToString()); 
cm.CityName = dt.Rows[i]["cityname"].ToString(); 
cm.CityCode = dt.Rows[i]["citycode"].ToString(); 
list.Add(cm); 
} 
} 
return list; 
}

CityLoader.asmx:
/// <summary> 
/// CityLoader 的摘要说明 
/// </summary> 
[WebService(Namespace = "http://tempuri.org/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
[System.ComponentModel.ToolboxItem(false)] 
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。 
// [System.Web.Script.Services.ScriptService] 
public class CityLoader : System.Web.Services.WebService 
{ 
[WebMethod] 
public void GetCityList(string code) 
{ 
CityBLL cb = new CityBLL(); 
StringBuilder sb = new StringBuilder(); 
List<CityModel> cm = cb.CityList(code); 
sb.Append("["); 
if (cm.Count > 0) 
{ 
for (int i = 0; i < cm.Count; i++) 
{ 
CityModel model = cm[i]; 
sb.Append("{"); 
sb.AppendFormat(@"""c_name"":""{0}"",", model.CityName); 
sb.AppendFormat(@"""c_code"":""{0}""", model.CityCode); 
sb.Append("}"); 
if (i < cm.Count - 1) 
{ 
sb.Append(","); 
} 
} 
} 
sb.Append("]"); 
System.Web.HttpContext.Current.Response.ContentEncoding = System.Text.Encoding.GetEncoding("utf-8"); 
System.Web.HttpContext.Current.Response.Write(sb.ToString()); 
} 
}
Javascript 相关文章推荐
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 #Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 #Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 #Javascript
基于datagrid框架的查询
Apr 08 #Javascript
datagrid框架的删除添加与修改
Apr 08 #Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 #Javascript
jQuery setTimeout()函数使用方法
Apr 07 #Javascript
You might like
php xml实例 留言本
2009/03/20 PHP
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
最大K个数问题的Python版解法总结
2016/06/16 Python
python框架django基础指南
2016/09/08 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
python 切换root 执行命令的方法
2019/01/19 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
农民入党思想汇报
2014/01/03 职场文书
股东协议书
2014/04/14 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
开业典礼致辞
2015/07/29 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python