jquery 实现二级/三级/多级联动菜单的思路及代码
jquery 实现二级/三级/多级联动菜单的思路及代码
本文介绍使用jQuery的AJAX功能和来实现省市区的三级联动效果，其他二级、三级或多级联动也可以按照此方法完成。文章中涉及到的数据表为City,为方便管理。 设计此表如下 ID：自增长字段 City_Name:城市名称 City_Code:城市代码 我们根据城市代码来查询省、市、区。城市代码结构大致如下： 内蒙古：150000，呼和浩特：150100，新城区：150101。 其他地区代码与此一样，省级为省级编号+0000，市级为省级编号+市级编号+00，地区为省级编号+市级编号+地区编号。 City.ASPX代码为： 　　复制代码 代码如下:　　&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""& &html xmlns=""& &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: position:} #dpArea{ display:position:} &/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 () {
}, success: function (data) {
var json = eval(data); jQuery("#" + item).append("&option value='' selected='selected'&请选择&/option&"); for (i = 0; i & json. i++) { jQuery("#" + item).append(jQuery("&option&&/option&").val(json[i]l(json[i].c_name)); }; } }); }
后台代码： 　　复制代码 代码如下:　　//实例类 public class CityModel { int _ string _ string _ public int ID { set { _id = } get { return _ } } public string CityName { set { _cityname = } get { return _ } } public string CityCode { set { _citycode = } get { return _ } } } //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.C 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); } }
CityLoader.asmx： 　　复制代码 代码如下:　　/// &summary& /// CityLoader 的摘要说明 /// &/summary& [WebService(Namespace = "")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [ponentModel.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.C 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()); } }
H3C认证Java认证Oracle认证
基础英语软考英语项目管理英语职场英语
.NETPowerBuilderWeb开发游戏开发Perl
二级模拟试题一级模拟试题一级考试经验四级考试资料
软件测试软件外包系统分析与建模敏捷开发
法律法规历年试题软考英语网络管理员系统架构设计师信息系统监理师
高级通信工程师考试大纲设备环境综合能力
路由技术网络存储无线网络网络设备
CPMP考试prince2认证项目范围管理项目配置管理项目管理案例项目经理项目干系人管理
职称考试题目
招生信息考研政治
网络安全安全设置工具使用手机安全
生物识别传感器物联网传输层物联网前沿技术物联网案例分析
Java核心技术J2ME教程
Linux系统管理Linux编程Linux安全AIX教程
Windows系统管理Windows教程Windows网络管理Windows故障
数据库开发Sybase数据库Informix数据库
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(1432)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'利用jquery实现了一个菜单(select)联动',
blogAbstract:'利用jquery实现了一个菜单(select)联动，属转帖
&&& 在实现之前，需要让struts2支持json格式的数据。这里需要一个插件jsonplugin-0[1].32.jar。中间的32表示支持struts2.0.x。如果使用struts2.1以上，则需要jsonplugin-0[1].34.jar。然后在struts.xml中配置如下： &&&&&&&&&& &package name=\"ajax\" extends=\"json-default\"& &action name=\"ajaxQuery\" class=\"Action\"& &result type=\"json\"&&/result& ',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:1,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}jQuery + jQuery Mobile 实现省市二级下拉列表页面 -
- ITeye技术网站
博客分类：
一、需求：
提供省、市下拉列表，当用户选择省一级下拉列表项后，市下拉列表的各个选项自动变为该省对应的城市列表。
二、效果：
三、实现：
1.省市json数据，来自：
/jinzhao/archive//2428142.html
* 省市json数据
var provinceAndCityArray = [{ name: "北京", cities: ["西城", "东城", "崇文", "宣武", "朝阳", "海淀", "丰台", "石景山", "门头沟", "房山", "通州", "顺义", "大兴", "昌平", "平谷", "怀柔", "密云", "延庆"] },
{ name: "天津", cities: ["青羊", "河东", "河西", "南开", "河北", "红桥", "塘沽", "汉沽", "大港", "东丽", "西青", "北辰", "津南", "武清", "宝坻", "静海", "宁河", "蓟县", "开发区"] },
{ name: "河北", cities: ["石家庄", "秦皇岛", "廊坊", "保定", "邯郸", "唐山", "邢台", "衡水", "张家口", "承德", "沧州", "衡水"] },
{ name: "山西", cities: ["太原", "大同", "长治", "晋中", "阳泉", "朔州", "运城", "临汾"] },
{ name: "内蒙古", cities: ["呼和浩特", "赤峰", "通辽", "锡林郭勒", "兴安"] },
{ name: "辽宁", cities: ["大连", "沈阳", "鞍山", "抚顺", "营口", "锦州", "丹东", "朝阳", "辽阳", "阜新", "铁岭", "盘锦", "本溪", "葫芦岛"] },
{ name: "吉林", cities: ["长春", "吉林", "四平", "辽源", "通化", "延吉", "白城", "辽源", "松原", "临江", "珲春"] },
{ name: "黑龙江", cities: ["哈尔滨", "齐齐哈尔", "大庆", "牡丹江", "鹤岗", "佳木斯", "绥化"] },
{ name: "上海", cities: ["浦东", "杨浦", "徐汇", "静安", "卢湾", "黄浦", "普陀", "闸北", "虹口", "长宁", "宝山", "闵行", "嘉定", "金山", "松江", "青浦", "崇明", "奉贤", "南汇"] },
{ name: "江苏", cities: ["南京", "苏州", "无锡", "常州", "扬州", "徐州", "南通", "镇江", "泰州", "淮安", "连云港", "宿迁", "盐城", "淮阴", "沐阳", "张家港"] },
{ name: "浙江", cities: ["杭州", "金华", "宁波", "温州", "嘉兴", "绍兴", "丽水", "湖州", "台州", "舟山", "衢州"] },
{ name: "安徽", cities: ["合肥", "马鞍山", "蚌埠", "黄山", "芜湖", "淮南", "铜陵", "阜阳", "宣城", "安庆"] },
{ name: "福建", cities: ["福州", "厦门", "泉州", "漳州", "南平", "龙岩", "莆田", "三明", "宁德"] },
{ name: "江西", cities: ["南昌", "景德镇", "上饶", "萍乡", "九江", "吉安", "宜春", "鹰潭", "新余", "赣州"] },
{ name: "山东", cities: ["青岛", "济南", "淄博", "烟台", "泰安", "临沂", "日照", "德州", "威海", "东营", "荷泽", "济宁", "潍坊", "枣庄", "聊城"] },
{ name: "河南", cities: ["郑州", "洛阳", "开封", "平顶山", "濮阳", "安阳", "许昌", "南阳", "信阳", "周口", "新乡", "焦作", "三门峡", "商丘"] },
{ name: "湖北", cities: ["武汉", "襄樊", "孝感", "十堰", "荆州", "黄石", "宜昌", "黄冈", "恩施", "鄂州", "江汉", "随枣", "荆沙", "咸宁"] },
{ name: "湖南", cities: ["长沙", "湘潭", "岳阳", "株洲", "怀化", "永州", "益阳", "张家界", "常德", "衡阳", "湘西", "邵阳", "娄底", "郴州"] },
{ name: "广东", cities: ["广州", "深圳", "东莞", "佛山", "珠海", "汕头", "韶关", "江门", "梅州", "揭阳", "中山", "河源", "惠州", "茂名", "湛江", "阳江", "潮州", "云浮", "汕尾", "潮阳", "肇庆", "顺德", "清远"] },
{ name: "广西", cities: ["南宁", "桂林", "柳州", "梧州", "来宾", "贵港", "玉林", "贺州"] },
{ name: "海南", cities: ["海口", "三亚"] },
{ name: "重庆", cities: ["渝中", "大渡口", "江北", "沙坪坝", "九龙坡", "南岸", "北碚", "万盛", "双桥", "渝北", "巴南", "万州", "涪陵", "黔江", "长寿"] },
{ name: "四川", cities: ["成都", "达州", "南充", "乐山", "绵阳", "德阳", "内江", "遂宁", "宜宾", "巴中", "自贡", "康定", "攀枝花"] },
{ name: "贵州", cities: ["贵阳", "遵义", "安顺", "黔西南", "都匀"] },
{ name: "云南", cities: ["昆明", "丽江", "昭通", "玉溪", "临沧", "文山", "红河", "楚雄", "大理"] },
{ name: "西藏", cities: ["拉萨", "林芝", "日喀则", "昌都"] },
{ name: "陕西", cities: ["西安", "咸阳", "延安", "汉中", "榆林", "商南", "略阳", "宜君", "麟游", "白河"] },
{ name: "甘肃", cities: ["兰州", "金昌", "天水", "武威", "张掖", "平凉", "酒泉"] },
{ name: "青海", cities: ["黄南", "海南", "西宁", "海东", "海西", "海北", "果洛", "玉树"] },
{ name: "宁夏", cities: ["银川", "吴忠"] },
{ name: "新疆", cities: ["乌鲁木齐", "哈密", "喀什", "巴音郭楞", "昌吉", "伊犁", "阿勒泰", "克拉玛依", "博尔塔拉"] },
{ name: "香港", cities: ["中西区", "湾仔区", "东区", "南区", "九龙-油尖旺区", "九龙-深水埗区", "九龙-九龙城区", "九龙-黄大仙区", "九龙-观塘区", "新界-北区", "新界-大埔区", "新界-沙田区", "新界-西贡区", "新界-荃湾区", "新界-屯门区", "新界-元朗区", "新界-葵青区", "新界-离岛区"] },
{ name: "澳门", cities: ["花地玛堂区", "圣安多尼堂区", "大堂区", "望德堂区", "风顺堂区", "嘉模堂区", "圣方济各堂区", "路氹城"]}];
2.html页面，主要就是放置了两个select，使用了jQuery Mobile：
&!DOCTYPE html&
&meta charset="utf-8"&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&link rel="stylesheet"
href="/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /&
&title&meetwe&/title&
&table width="100%" cellpadding="10"&
&td align="center"&请选择省份&/td&
&td align="left"&&select id="selectProvince"&
&option value="-1"&请选择省份&/option&
&/select&&/td&
&td align="center"&请选择城市&/td&
&td align="left"&&select id="selectCity"&
&option value="-1"&请选择城市&/option&
&/select&&/td&
&script src="/jquery-1.9.1.min.js"&&/script&
&script src="/mobile/1.3.2/jquery.mobile-1.3.2.min.js"&&/script&
&script src="../js/province-and-city-json.js"&&/script&
&script src="../js/create-province-and-city.js"&&/script&
3.js代码实现填充下拉列表选项，并响应省一级下拉列表选中项改变事件更改市级下拉列表取值：
$(document).on("pageinit", function() {
// 填充省下拉列表
var provincesOptionHtml = "";
var provinces = [];
for(var el in provinceAndCityArray) {
provinces.push(provinceAndCityArray[el].name);
provincesOptionHtml += "&option value=" + el + "&" + provinceAndCityArray[el].name + "&/option&";
$("#selectProvince").append(provincesOptionHtml);
// 填充城市下拉列表
$("#selectProvince").bind("change", function() {
var selectedProvince = $("#selectProvince :selected").val();
if(selectedProvince != -1) {
var citiesOptionHtml = "";
var cities = [];
cities = provinceAndCityArray[selectedProvince].
for(var elCity in cities) {
citiesOptionHtml += "&option value=" + elCity + "&" + cities[elCity] + "&/option&";
// 清空之前的城市列表
$("#selectCity option[value!=-1]").remove();
$("#selectCity option[value=-1]").attr("selected", true);
$("#selectCity").append(citiesOptionHtml);
$("#selectCity").selectmenu("refresh");
浏览 12143
浏览: 56982 次
来自: 广州
文章质量不错
暂不存在 写道请问加密的appid是什么用的，然后密匙的生成是 ...
请问加密的appid是什么用的，然后密匙的生成是怎么弄得，服务 ...
后来查找了下，有不少其他js模板引擎可选：http://dev ...
weiqiang.yang 写道路过，String.getBy ...未注册过用户可以点击直接登录哦！
使用注册邮箱登录
选择画板...
你已经成功采集到
&|关闭窗口织梦模板建站、织梦仿站，推荐选跟版网(专业织梦模板定制下载站)，您可以把织梦模板网：
亲，跟版网是专业的DEDECMS模板下载和定制开发服务商！您可以选择或者
基于jquery的二级联动菜单实现代码-jquery
& &以下内容您可能感兴趣： &
jQuery 1.3.2 简单实现select二级联动
代码如下: &!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& &meta http-equiv="Content-Type" content="text/ charset=gb2312" /& &title&jQuery 二级联动&/title& &script src="http://img.jb51.net/jslib/jquery/jquery.js" type="text/javascript"&&/script& &script type="text/javascript"& $(document).ready(function(){ $("#province").change(function(){ $("#province option").each(function(i,o){ if($(this).attr("selected")) { $(".city").hide(); $(".city").eq(i).show(); } }); }); $("#province").change(); }); &/script& &/head& &body& &select id="province"& &option&----请选择省份---- &option&北京 &option&上海 &option&江苏 &/select& &select class="city"& &option&----请选择城市---- &/select& &select class="city"& &option&东城&/option& &option&西城&/option& &option&崇文&/option& &option&宣武&/option& &option&朝阳&/option& &/select& &select class="city"& &option&黄浦&/option& &option&卢湾&/option& &option&徐汇&/option& &option&长宁&/option& &option&静安&/option& &/select& &select class="city"& &option&南京&/option& &option&镇江&/option& &option&苏州&/option& &option&南通&/option& &option&扬州&/option& &/select& &/body& &/html&
JQuery实现的二级联动菜单 先看页面代码 Html代码
代码如下: &tr& &td align="right" width="30%"&&span class="red"&*&/span&短信类型：&/td& &td align="left"& &select name='city' id='first'& &option value='-1'&==请选择类型==&/option& &#list typeList as t& &option value='${t.id}'&${t.name}&/option& &/#list& &/select&
&span id="second"& &select id="area" name="msgTypeId"& &/select& &/span& &/td& &/tr&
其中id为first的下拉列表为第一个下拉列表，id为second的区域为第二个下拉列表。 JavaScript代码：
代码如下: &script language="javascript"& $(function(){ $("#second").hide(); //初始化的时候第二个下拉列表隐藏 $("#first").change(function(){ //当第一个下拉列表变动内容时第二个下拉列表将会显示 var parentId=$("#first").val(); if(null!= parentId && ""!=parentId){ $.getJSON("http://localhost/msg/getSecondTypesJson",{id:parentId},function(myJSON){ var options=""; if(myJSON.length&0){ options+="&option value=''&==请选择类型==&/option&"; for(var i=0;i&myJSON.i++){ options+="&option value="+myJSON[i].id+"&"+myJSON[i].name+"&/option&"; } $("#area").html(options); $("#second").show(); } else if(myJSON.length&=0){ $("#second").hide(); } }); } else{ $("#second").hide(); } }); }); &/script&
跟版网-专业织梦模板下载平台，转载请注明出处：
& &精心为您推荐： &
& &邀您关注： &
扫描左侧二维码即可在手机端访问此页面
扫描左侧二维码即可关注跟版网官方微信公众号，获取金币模板，还可以免费仿站哦！
扫描左侧二维码即可加入跟版网官方群，免费获取金币资源并可以与其他织梦高手共同交流学习
跟版网率先实现织梦的三网合一网站，从即日起（）日，跟版网会陆续免费分享一批金币资源给需要的朋友，关注本站认证官方微信公众账号并回复相应的提取码，系统会自动将下载地址发送给您，同时这些金币资源也会分享在官方的QQ群中，欢迎各位朋友踊跃加入。另外本站后期会每周选择大家比较喜欢的网站仿制，并免费分享给大家，还有免费送金币活动哦！
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
- dede源码分享
售价:20金币
- dede源码分享
售价:0金币
- dede源码分享
售价:0金币
- dede源码分享
售价:40金币
- dede源码分享
售价:20金币
& & & 跟版网竭力打造中国最大的织梦源码和织梦模板商城，我们有一批经验丰富的设计师和程序员，发展五年，跟版网拥有丰富的织梦模板，欢迎您的咨询，我们将竭诚为您提供最优质的服务。
& & & 跟版网织梦源码商城坚持“创意+品质+服务”的高端理念，运用创意设计的理念为您塑造高品质的网络品牌形象。凭借五年的探索和实践，跟版网织梦源码商城拥有一支经验丰富、技术精湛、尽职尽责的网络服务团队。精品网站建设，从跟版网织梦源码商城建站开始。
& & & 跟版网织梦源码和模板可分为两种形式获得，一种是官方源码，另外一种是会员共享源码。两种源码都分为免费和收费两种形式。
& & & 跟版网官方收费源码可通过支付费用获得，具体操作流程可查看网址：。会员共享源码可通过共享模板获取金币下载。如觉得麻烦，可以联系客服QQ：进行金币充值，充值后可随意下载。}