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 学习 - 提高篇
Feb 02 Javascript
javascript 控制弹出窗口
Apr 10 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
JavaScript实现猜数字游戏
May 20 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
discuz安全提问算法
2007/06/06 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
PHP加密技术的简单实现
2016/09/04 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
JavaScript 拖拉缩放效果
2008/12/10 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
python Spyder界面无法打开的解决方法
2018/04/27 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
python 实现单通道转3通道
2019/12/03 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
基于python实现操作redis及消息队列
2020/08/27 Python
MIS软件工程师的面试题
2016/04/22 面试题
专升本个人自我评价
2013/12/22 职场文书
十佳护士先进事迹
2014/05/08 职场文书
优秀员工评优方案
2014/06/13 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
2015年项目工作总结
2015/04/29 职场文书
民事代理词范文
2015/05/25 职场文书
2016公司年会主持词
2015/07/01 职场文书
python3 字符串str和bytes相互转换
2022/03/23 Python