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 相关文章推荐
ajax请求get与post的区别总结
Nov 04 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
Vue表单控件数据绑定方法详解
Feb 05 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 Javascript
react国际化react-intl的使用
May 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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
php 文件缓存函数
2011/10/08 PHP
CURL状态码列表(详细)
2013/06/27 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
使用JavaScript破解web
2018/09/28 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
python中argparse模块用法实例详解
2015/06/03 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
python中wheel的用法整理
2020/06/15 Python
详解python logging日志传输
2020/07/01 Python
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
精伦电子Java笔试题
2013/01/16 面试题
土木工程专业推荐信
2014/02/19 职场文书
安全口号大全
2014/06/21 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
电信营业员岗位职责
2015/04/14 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
七年级作文之冬景
2019/11/07 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
mysql创建存储过程及函数详解
2021/12/04 MySQL
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python