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 相关文章推荐
用js实现的页面关键字密度查询代码
Dec 27 Javascript
使用js获取QueryString的方法小结
Feb 28 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
jquery获取tagName再进行判断
May 29 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 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分页函数
2006/10/09 PHP
建站常用13种PHP开源CMS比较
2009/08/23 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
深入理解PHP内核(一)
2015/11/10 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
JavaScript 指导方针
2007/04/05 Javascript
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
django 多数据库配置教程
2018/05/30 Python
安装PyInstaller失败问题解决
2019/12/14 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
会计电算化个人求职信范文
2014/01/24 职场文书
促销活动总结怎么写
2014/06/25 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
小学记事作文之200字
2019/08/06 职场文书
创业计划之特色精品店
2019/08/12 职场文书
Javascript webpack动态import
2022/04/19 Javascript