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 相关文章推荐
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
vue随机验证码组件的封装实现
Feb 19 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
php实现读取和写入tab分割的文件
2015/06/01 PHP
php验证码实现代码(3种)
2015/09/07 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
基于python实现简单日历
2018/07/28 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
Python assert关键字原理及实例解析
2019/12/13 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
pandas的resample重采样的使用
2020/04/24 Python
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
EJB的激活机制
2013/10/25 面试题
大三自我鉴定范文
2013/10/05 职场文书
学生励志演讲稿
2014/01/06 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
行政专员的岗位职责
2014/03/10 职场文书
《观舞记》教学反思
2014/04/16 职场文书
合作经营协议书范本
2014/04/17 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
关于vue-router-link选择样式设置
2022/04/30 Vue.js