动态二级菜单

在csdn上见到一个朋友问的,私信又有字数限制,所以在这里写一篇博客:

首先,了解一下二级菜单的作用。即:二级菜单会根据一级菜单值的不同而动态的改变其下拉选项的值。

下面是根据所属园区改变楼宇的值:

首先:新建两个选择菜单,作为一级菜单和二级菜单。 

所属园区
<select id="parkID" name="parkID" style="width:180px;height:30px" onchange="javascript:setBuilding()">
<option value="">&nbsp;请选择</option>
</select>

所属楼宇
<select id="buildingID" name="buildingID" style="width:180px;height:30px"></select>

然后:在页面加载时为一级菜单赋值:

$(document).ready(function(){

/* 为园区信息下拉框赋值 */
$.ajax({
url:"getPark",
type:"POST",
dataType: "json",
success:function(data){
    for(var i=0;i<data.length;i++){
        var option = $("<option>").text(data[i].parkName).val(data[i].id);
        $("#parkID").append(option);
    }
}
});

})

而后:在一级菜单值被改变时,为二级菜单赋值

function setBuilding(){

var parkID=$("#parkID").val();/*获取到一级菜单的下拉值*/

if(parkID!=""&&parkID!=null){/*判断其是否选择了有效的值*/

$("#buildingID").empty();
/*将楼宇信息下拉框的内容清空,否则会出现下拉框的值一直累加*/

$.ajax({
url:"getBuilding",
type:"POST",
data:{
"parkID":parkID,
},
dataType: "json",
success:function(data){
    for(var i=0;i<data.length;i++){
        var option = $("<option>").text(data[i].buildingName).val(data[i].id);
        $("#buildingID").append(option);
    }
}
});

}else{/*如果用户选择了无效的值*/

$("#buildingID").empty();
/*将二级菜单的下拉框的内容清空*/

}

}

新手一个,二级菜单的方法应该有很多,希望共同进步。

时间: 2024-11-02 10:16:13

动态二级菜单的相关文章

DW+ASP 玩转动态二级菜单

菜单|动态|二级菜单 一般情况下这种情况是来对二级的目录有用,对于现在网站流传的JS好多种,但都无外乎那些令像我这样的菜鸟晕头转向的JS代码..一下子for...一下子array的.废话少说,切入正题了. 首先得建一个表,当然,如果你的表中就已经建好目录的话,那这一步可以省略了.但有一点要提醒:这个表是我这个例子的使用依据(不知道这样说对不对). 由于我用的表是ACCESS的,所以建表就不说了,只列出这个两个表的相应的字段名(数据库名:db.mdb):表名:type_tree --父类字段:ty

Dreamweaver+ASP制作动态二级菜单

dreamweaver|菜单|动态|二级菜单 一般情况下这种情况是来对二级的目录有用,对于现在网站流传的JS好多种,但都无外乎那些令像我这样的菜鸟晕头转向的JS代码..一下子for...一下子array的. 首先得建一个表,当然,如果你的表中就已经建好目录的话,那这一步可以省略了.但有一点要提醒:这个表是我这个例子的使用依据(不知道这样说对不对). 由于我用的表是ACCESS的,所以建表就不说了,只列出这个两个表的相应的字段名(数据库名:db.mdb): 表名:type_tree --父类 字段

MainMenu控件,关于动态添加二级菜单的一点实践经验

问题描述 本人最近才开始接触.net,在最近的编程过程中,需要动态添加二级菜单.我在网上搜索了一些资料,没有看到比较完整的说明.在经过自己的实践完成后,特share出来给大家.同时也欢迎大家多多指正.环境场景描述:采用MainMenu控件,先静态建立了一级菜单,name为:Main_Tools:通过一个交互界面(这里为textbox控件),让用户输入二级菜单的名称,当用户点击"OK"按钮时,则自动在Main_Tools菜单下生成二级菜单,二级菜单的text就是用户在textbox控件中

前端开发-Web前端 二级菜单移植

问题描述 Web前端 二级菜单移植 web前端新手,好多都还不懂,还请多多指教.需要的效果如图,在鼠标悬停在按钮位置,出现二级菜单开发-Web前端 二级菜单移植-移动web 二级菜单联动"> 以下是需要移植的代码 <ul class="verticals-nav red red"> <li><a href="#"><i class="icon-briefcase"></i>

iOS的客户端菜单功能仿百度糯米/美团二级菜单_IOS

我刚好最近在开发一个商城项目,实现了一个简单的控件,就和大家一起分享一下. 控件的效果就是类似百度糯米或者美团的二级菜单,我开发iOS的客户端菜单功能,直接参考了git一个项目,对应的UI效果: 其实效果看起来还不错.iOS开发完成以后,又要准备开发Android,发现对应网上的案例还是很少的,或者不是想要的效果.我想参考了别人的项目代码,也为开源项目做点贡献,准备自己开发一个Android的menu项目: 折腾了大概三个小时,终于搞定了,效果如下: 从图片不难看出,这是一个多级菜单,控制者填充

jQuery实现向下滑出的二级菜单效果实例_jquery

本文实例讲述了jQuery实现向下滑出的二级菜单效果.分享给大家供大家参考.具体如下: 这里用jQuery实现向下滑出的二级菜单代码,滑出菜单,鼠标放在主菜单的任意一项上,就会向下滑出二级的子菜单.当然本代码只是一个演示,有些菜单是随便弄的,经过测试,兼容IE8.火狐和Chrome等浏览器,有兴趣的你可以自己试下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-down-show-2menu-style-codes/ 具体代码如下

javascript鼠标滑过显示二级菜单特效_javascript技巧

本文实例为大家分享了javascript鼠标滑过显示二级菜单效果,供大家参考,具体内容如下 1. 关键代码:使用 switch 或 if 判断语句,改变对应的二级菜单显示方式为 block 或 none function selectTabMenu(i){ switch(i){ case 71: document.getElementById("TabMenuCon71").style.display="block"; document.getElementById

ASP.NET MVC动态二级域名及DNS泛解析配置

动态二级域名的实现: 应用场景:目前产品要实现SaaS功能,因为工作需要实现二级域名:www.{CompanyUrl}.xxx.com 假设产品主域名入口为:www.xxx.com 当a公司租户登录时:www.a.xxx.com 当b公司租户登录时: www.b.xxx.com 首先想到的是对Url的重写:(网上有关于UrlRewrite的实现.在ASP.NET中这也是常用的手法.) Route简介:ASP.NET路由可以不用映射到网站特定文件的URL.由于该 URL 不必映射到文件,因此可以使

精彩动态导航菜单制作详解

菜单|导航|动态|详解 公式在制作特效中非常有用,著名的三星导航菜单就用到了此公式.现在许多韩国网站出尽风头,其中缓冲导航是其一大亮点.本文以一德国网站的导航为例,详解缓冲导航的制作.感谢溶剂提供的坐标算法. 本例效果预览: 制作思路 1.图片缩放控制 利用缓冲公式设置图片的缩放比例,如果鼠标滑过某图片,放大1.8倍.如果其它图片的序号与此图片的序号相差1,就是此图片两边的图片,放大1.4倍,其它的为原始大小. 2.图片坐标控制 当某图片放大时,相邻的图片的坐标等于此图片的坐标加上这两张图片的宽