ajax实现多级联动菜单,jquery 实现二级/三级/多级联动菜单的思路及代码
本文介绍使用jquery的AJAX功能和asp.net来实现省市区的三级联动效果,其他二级、三级或多级联动也可以按照此方法完成。
文章中涉及到的数据表为City,为方便管理。
设计此表如下
ID:自增长字段
City_Name:城市名称
City_Code:城市代码
我们根据城市代码来查询省、市、区。城市代码结构大致如下:
内蒙古:150000,呼和浩特:150100,新城区:150101。
其他地区代码与此一样,省级为省级编号+0000,市级为省级编号+市级编号+00,地区为省级编号+市级编号+地区编号。
City.ASPX代码为:
复制代码 代码如下:
jQuery + ASP.NET实现三级联动
#dpCity{ display:none; position:relative;}
#dpArea{ display:none;position:relative;}
省:
市:
区:
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("请选择");
for (i = 0; i < json.length; i++) {
jQuery("#" + item).append(jQuery("").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 CityList(string code)
{
List list = new List();
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:
复制代码 代码如下:
///
/// CityLoader 的摘要说明
///
[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 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());
}
}
ajax实现多级联动菜单,jquery 实现二级/三级/多级联动菜单的思路及代码相关推荐
- jquery实现二级导航下拉菜单效果实例
大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用.前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉式菜单. 使用JQuery实现需要用到的知识有: ...
- jquery实现二级导航下拉菜单效果
大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用.前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉式菜单. 使用JQuery实现需要用到的知识有: ...
- ajax伸缩菜单,jQuery实现的动态伸缩导航菜单实例
/p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> jquery select body {p ...
- 基于jQuery+ashx+.net实现三级栏目联动操作
父级ID可以为空以两个编号为一级 可以添加到第四级 table 字段有ID. name .parentNode. childNode等基本属性 selecet parentNode ,len(c ...
- 实战案例:横向和纵向的三级下拉菜单需要掌握hover
实战案例:横向和纵向的三级下拉菜单需要掌握hover 三级下拉 一. 横向三级 二.纵向三级 1.两个ul绝对定位做横向(推荐) 2.两个ul相对定位做竖向(推荐) 3.两个ul绝对定位配合li相对定 ...
- dw二级联动下拉菜单插件 宋君墨_Excel实例——一级、二级、多级下拉菜单一次讲透...
啥叫下拉菜单?啥叫一级?二级?多级?你们都在说啥? 一级下拉菜单 其实是一级,这里就不再多次强调是一级了,就是下拉菜单! 当需要多人填写,又保证填写规范的时候,下拉菜单使用起来是非常有必要了!两种办法 ...
- jq ajax写二级导航,jQuery实现二级导航菜单的示例
实用JQ实现导航二级菜单效果,导航菜单在网站中非常常见,有的网站可能会出现三级菜单及多级菜单模式,下面我们来简单的实现一个二级菜单的效果. 部分效果截图: 整体代码: 导航菜单案例 *{ paddin ...
- 基于jQuery带图标的多级下拉菜单
之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...
- ajax省市联动案例,JQuery+Ajax制作省市联动
$(document).ready(function () { $("#Province").append("" + "--请选择--" + ...
最新文章
- xcode 的一些问题
- 能说明白为啥三次握手的文章节选
- import是引进外部函数吗_你必须要知道的Python中的main函数
- 获取某一日期所在月份的第一天日期或最后一天日期
- 大端小端区别、Union和Struct的内存分配
- day16-Dom提交表单以及其他
- Python核心场景自动化测试项目实战(二)
- PHP_小数/四舍五入/上进/下取等
- ros 安装c++编译的可执行文件
- php音频格式 操作,php操作视频音频类-ffmpeg-php
- ubuntu遇到的 the system is runing low-graphics mode 问题
- php 操作xls,php中使用PHPExcel操作excel(xls)文件
- shiro框架学习(一)
- linux常用命令和关闭防火墙
- linuxshell编程_使shell命令发包软件-当你在Linux shell调用外部程序,如
- 袋鼠云数智之旅·上海站|探索“十四五”智慧校园新图景
- matlab软件topsis分析,基于AHP—TOPSIS的渗透测试工具的综合评价方法与流程
- 新成员入群监控自动发送邮件效果如何实现?
- 华为U8500使用心得
- PowerVR贪吃蛇环境配置全流程
热门文章
- (BCB) CComPtrIHTMLDocument2 FIEDoc;
- 如何自定义MFC的窗口类名
- Visual C++编程中的文件操作
- Boss黑话,老板看完都笑了!
- 前端xss攻击的原理
- 前端必须掌握的经典布局:“双飞翼布局”
- android.support.v7.widget.,关于android.support.v7.widget.RecyclerView的使用,总是找不到类...
- 推荐我们在B站的生信程序基础课
- 聚类分析(一)基本思想
- PS滤镜Nik Collection 2 for mac中文版合集