Javascript实现动态菜单添加

最新推荐文章于 2022-07-30 01:09:51 发布
最新推荐文章于 2022-07-30 01:09:51 发布
阅读量3.3k 收藏 3
点赞数 3
分类专栏： Web开发 Javascript 文章标签： javascript function class jquery xhtml 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shan9liang/article/details/7198211
版权

在注册信息的时候，常常需要通过下拉菜单让用户选择，而且希望用户在第一个下拉框做的选择，影响第二个下拉框的内容。有时候，如果第一个下拉框不作出选择，第二个下拉框根本不会页面上显示，为了给用户呈现一个更清晰的页面。


先来看看效果：



Html源码：

<!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/html; charset=utf-8" />
<title>动态改变菜单</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="SelectMenu.js"></script>

</head>

<body>
<form action="#">
<br/>
<br/>
<br/>

    <div class="Address">
       
        <span class="Province">Province：
            <select>
                <option value="" selected="selected">Please Choose Province</option>
                <option value="HeBei">HeBei</option>
                <option value="ShanDong">ShanDong</option>
            </select> 
        </span>
   
        <span class="City" style="display:none">City：
            <select>
            </select>
        </span>
        <span class="Area" style="display:none">Area：
            <select>
            </select>
        </span>
        <br/>
         <br/>
		<span class="AddressSelect" style="display:none">
		</span>
    </div>

</form>
</body>
</html>

Javascript源码 

$(document).ready(function () {
    
    //找到三个下拉框
    var ProvinceSelect = $(".Province").children("select");
    var CitySelect = $(".City").children("select");
    var AreaSelect = $(".Area").children("select");
    var AddressSelect=$(".AddressSelect");
    
    //给第二个下拉框注册事件
    ProvinceSelect.change(function () {
								
        //1、获取当前下拉框的值
         var ProvinceValue = $(this).val();
        //1.1只要第一个下拉框内容有变化，第三个下拉框就要隐藏起来
        AreaSelect.parent().hide();
        AddressSelect.hide();
		AddressSelect.html("");
        //2、如果值不为空，则显示城市下拉框
         if (ProvinceValue != "") {
				   CitySelect.html("");
                   $("<option value=''>Please Choose City</option>").appendTo(CitySelect);
					switch(ProvinceValue)
					   {
						//实际项目中，这个城市数组肯定是在服务器获取的，这里为了简便，我就直接自定义了一个数组
                        //如果追求完美，这里还可以加一道缓存，防止重复获取
					   case "HeBei":
				            var CityOfHeBei=["ShiJiaZhuang","CangZhou","LangFang"];	
				   			for(var i=0;i<CityOfHeBei.length;i++){
				 				$("<option value='"+CityOfHeBei[i]+"'>"+CityOfHeBei[i]+"</option>").appendTo(CitySelect);
				 			}
							 break;
					   case "ShanDong":
						 	var CityOfShanDon=["JiNan","DeZhou","QingDao"];		
						 	for(var i=0;i<CityOfShanDon.length;i++){
				 				$("<option value='"+CityOfShanDon[i]+"'>"+CityOfShanDon[i]+"</option>").appendTo(CitySelect);
				 			}
						 	break;
					
					   }
                 CitySelect.parent().show();   
        } else {
            CitySelect.parent().hide();
        }

    });

 

	//给第二个下拉框注册事件
	 CitySelect.change(function () {
			
			var CityValue = $(this).val();		
			AddressSelect.hide();
			AreaSelect.parent().hide();	
			AddressSelect.html("");
       		 if (CityValue != "") {
				   AreaSelect.html("");
                   $("<option value=''>Please Choose Area</option>").appendTo(AreaSelect);
					switch(CityValue)
					   {
					   //实际项目中，这个区数组肯定是在服务器获取的，这里为了简便，我就直接自定义了一个数组
					   //如果追求完美，这里还可以加一道缓存，防止重复获取
					   case "ShiJiaZhuang":
				            var AreaOfCity=["GaoXinQu","KaiFaQu","XinHuaQu"];	
				   			for(var i=0;i<AreaOfCity.length;i++){
				 				$("<option value='"+AreaOfCity[i]+"'>"+AreaOfCity[i]+"</option>").appendTo(AreaSelect);
				 			}
							 break;
					   case "CangZhou":
						 	var AreaOfCity=["XinHuaQu","YunHeQu"];		
						 	for(var i=0;i<AreaOfCity.length;i++){
				 				$("<option value='"+AreaOfCity[i]+"'>"+AreaOfCity[i]+"</option>").appendTo(AreaSelect);
				 			}
						 	break;
					   case "LangFang":
							var AreaOfCity=["AnCiQu","GuangYangQu"];
							for(var i=0;i<AreaOfCity.length;i++){
				 				$("<option value='"+AreaOfCity[i]+"'>"+AreaOfCity[i]+"</option>").appendTo(AreaSelect);
				 			}
						    break;
					   case "QingDao":
				            var AreaOfCity=["GaoXinQu","KaiFaQu","XinHuaQu"];	
				   			for(var i=0;i<AreaOfCity.length;i++){
				 				$("<option value='"+AreaOfCity[i]+"'>"+AreaOfCity[i]+"</option>").appendTo(AreaSelect);
				 			}
							 break;
					   case "DeZhou":
						 	var AreaOfCity=["XinHuaQu","YunHeQu"];		
						 	for(var i=0;i<AreaOfCity.length;i++){
				 				$("<option value='"+AreaOfCity[i]+"'>"+AreaOfCity[i]+"</option>").appendTo(AreaSelect);
				 			}
						 	break;
					   case "JiNan":
							var AreaOfCity=["AnCiQu","GuangYangQu"];
							for(var i=0;i<AreaOfCity.length;i++){
				 				$("<option value='"+AreaOfCity[i]+"'>"+AreaOfCity[i]+"</option>").appendTo(AreaSelect);
				 			}
						    break;
					   }
                	 AreaSelect.parent().show(); 
				
					 
       		 } else {
           			 AreaSelect.parent().hide();
        	}

    });

	AreaSelect.change(function(){
			var AreaValue=$(this).val();
			AddressSelect.html("");
			if (AreaValue!=""){
				$("<span>The Address Is --Province: "+ProvinceSelect.val()+"  City: "+CitySelect.val()+"  Area: "+AreaSelect.val()+"</span>").appendTo(AddressSelect);
			AddressSelect.show();
			//alert("The Address Is  Province: "+ProvinceSelect.val()+"  City: "+CitySelect.val()+"  Area: "+AreaSelect.val());
				}				   
	 })

});

这里还引用了Jquery，貌似实现这个效果，用不用都无所谓，最近为了熟悉Jquery的用法，所以就加上了。



shan9liang
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Javascript实现动态菜单添加的实例代码
12-12
先来看看效果： Html源码： 代码如下:<!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/html; charset=utf-8″ />  <title>动态改变菜单</title>  <script t
JS实现一个动态下拉菜单栏
SunBoy晨晨
09-29 2134
1 引言    一段时间里,经常在网上的技术论坛中看到有朋友提问怎样用JS来实现一个动态的下拉弹出式的菜单栏,我个人觉的这种功能的实现,现在已经不是难题了,在网上搜一下,各种各样实现的方式都有,成型的代码皆是，那为什么还有这么多人再网上苦苦搜询实现的方法呢？我在读完了网上若干
Web前端开发技术课程大作业: 关于美食的HTML网页设计——HTML+CSS+JavaScript在线美食订餐网站html模板源码30个页面:
热门推荐
HTML网页设计
07-30 1万+
👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。 🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🧡 【作者主页——🔥获取更多优质源码】 🧡 【...
js动态加载div显示主菜单和子菜单+jquery获取动态id
颗粒归仓
05-07 1万+
最近在做项目重构的主界面工作中，需要动态显示主菜单以及子菜单（各个界面的链接），查看原来老系统采用的是asp控件，但是重构的时候采用mvc框架，而且这些菜单并不是死的，而是通过其他界面来配置的，主菜单和子菜单都是数据库查询显示。因此，就想到了动态的拼接div来实现效果。 要实现的效果图 实现步骤： 第一步，查询主菜单名称 第二步，查询具体界面名称
js定义菜单列表
weixin_43447266的博客
09-07 667
js定义菜单列表代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js定义菜单列表</title> </head> <style type="text/css"> li{ background-color: lavender; width: 300px; } </style> <bo
JS（简单的动态菜单）
小卡酷谋的博客
06-16 797
如何实现自定义菜单呢~ <style> .two { margin-left: 30px; } .three { margin-left: 60px; } </style> <div id="box"> </div> <script> let arr = [ {id:1, name: '零食', pid: 0, level: 1}, {id:2, name: '生活用品', pid: 0, level
一个js的动态菜单菜单
05-03
一个js动态菜单.兼容多方面浏览器 不存在乱码问题
js右键菜单，菜单项由js动态添加，纯js调用
10-11
js右键菜单，测试通过IE，火狐，Google，菜单项由js动态添加，在菜单项中可添加图标，文本，菜单项点击事件，以及分隔线
移动端H5动态加载菜单 源码
04-21
我的博客《移动端H5动态加载菜单》代码，下载需要积分，请参考博客谨慎下载， 博客地址：https://blog.csdn.net/chengbao315/article/details/105649923
js写的动态添加的级联菜单
01-17
最新写的，以供分享...........................................
js菜单 动态显示和关闭
01-18
js菜单 动态显示和关闭 js菜单 动态显示和关闭 js菜单 动态显示和关闭
JavaScript实现下拉菜单的显示和隐藏
11-26
我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏。使用JavaScript方法实现我们需要用的知识有： 1)JS事件：onmouseover鼠标经过事件和onmouseout鼠标离开事件。 2)JS基础语法：使用function关键字定义函数。 ...
javascript 静态树菜单实现代码
01-19
谁有兴趣的话可以改成动态加载数据，或者用jquery，代码肯定会少很多！我发现添加一些css，这棵树在静态页面还是大有用途的！ .expand{ cursor:pointer; } .hide{ cursor:pointer; } 定义列表也能变成一棵树：...
基于JavaScript实现智能右键菜单
11-22
通过本文给大家介绍智能右键菜单，需要引入的文件再文末会给出，先给大家展示下代码： 具体代码如下所示： var cityArray = new Array(); cityArray.push("北京"); cityArray.push("上海"); //设置表头的鼠标右击...
用javascript写一个食堂菜单_过节很无聊？还是用 JavaScript 写一个脑力小游戏吧！...
weixin_39531834的博客
12-02 139
本教程使用了HTML5，CSS3和JavaScript的基本的技术。 我们将讨论数据属性、定位、透视、转换、flexbox、事件处理、超时和三元组。 你不需要在编程方面有太多的知识和经验就能看懂，不过还是需要知道HTML，CSS和JS都是什么。Demo: Memory Game Project项目结构先在终端中创建项目文件： mkdir memory-game cd memory-game t...
js动态生成菜单树
meilovebo的博客
06-26 4105
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;js生成菜单树&lt;/title&gt;&lt;link href="assets/cs
javascript实现下拉菜单效果
最新发布
03-29
以下是一个简单的HTML和JavaScript代码示例，用于实现下拉菜单效果： HTML代码： ``` <div class="dropdown"> <button onclick="showDropdown()" class="dropbtn">下拉菜单</button> <div id="myDropdown" class="dropdown-content"> <a href="#">选项1</a> <a href="#">选项2</a> <a href="#">选项3</a> </div> </div> ``` CSS代码： ``` /* 下拉菜单按钮样式 */ .dropbtn { background-color: #4CAF50; color: white; padding: 12px; font-size: 16px; border: none; cursor: pointer; } /* 下拉菜单内容样式 */ .dropdown-content { display: none; position: absolute; z-index: 1; } /* 下拉菜单选项样式 */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* 鼠标悬停时下拉菜单选项样式 */ .dropdown-content a:hover { background-color: #f1f1f1; } /* 显示下拉菜单时，修改按钮样式 */ .show { background-color: #3e8e41; } ``` JavaScript代码： ``` // 显示下拉菜单 function showDropdown() { document.getElementById("myDropdown").classList.toggle("show"); } // 关闭下拉菜单 window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); for (var i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } ``` 上述代码中，我们首先定义了一个`<div>`元素，包含一个按钮和一个下拉菜单。按钮的`onclick`属性绑定了一个JavaScript函数`showDropdown()`，用于显示下拉菜单。下拉菜单的内容通过`<a>`元素实现。 然后，我们定义了一些CSS样式，用于设置下拉菜单的外观。最后，我们编写了两个JavaScript函数，`showDropdown()`用于显示下拉菜单，`window.onclick`事件用于在用户点击页面其他区域时关闭下拉菜单。 注意：上述代码只是一个简单的示例，实际应用中可能需要根据具体要求进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值