js实现网页多级级联菜单代码


Posted in Javascript onAugust 20, 2015

本文实例讲述了js实现网页多级级联菜单。分享给大家供大家参考。具体如下:

这是大家在网页上经常会见到的级联菜单特效,不过这一个代码是由JS来实现,将级联菜单中的内容保存在了JS数组中,为了页面美观,本次还美化了一下表格边框,整体看上去更和谐实用了,多级的下拉菜单对网页设计来说比较实用。

运行效果如下图所示:

js实现网页多级级联菜单代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>多级级联菜单</title>
<script type="text/javascript">
var arr2 = new Array(4);
arr2["数码设备"] = new Array("数码相机","打印机");
arr2["家用电器"] = new Array("电视机","电冰箱");
arr2["礼品工艺"] = new Array("鲜花","彩带");
function removeinfo(classMenu){//将下拉框各选项清空
 for (var i=0; i < classMenu.options.length; i++){
 classMenu.options[i]=null;
 }
}
function changeMenu(classList,classMenu){
 removeinfo(classMenu)
 for (var i=0; i < classList.length; i++){
 classMenu[i]=new Option(classList[i],classList[i]);
 }
}
</script>
</head>
<body style="font-size:12px">
<table width="487" height="333" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
 <td align="center" valign="top"><br>
 <br>
 <br>
 <br> <br> <table width="86%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#6699CC">
 <form name="form1">
 <tr bgcolor="#FFFFFF">
  <td height="22" align="right">所属类别:</td>
  <td height="22" align="left"><select name="类别" id="类别" onChange="changeMenu(arr2[document.form1.类别.options[document.form1.类别.selectedIndex].text],document.form1.分类);">
  <option selected>数码设备</option>
  <option>家用电器</option>
  <option>礼品工艺</option>
  </select>
  <select name="分类" id="分类">
  <option>数码相机</option>
  <option>打印机</option>
  </select></td>
 </tr>
 <tr bgcolor="#FFFFFF">
  <td height="22" align="right">商品名称:</td>
  <td height="22" align="left"><input name="商品名称" type="text" id="商品名称" size="30" maxlength="50"></td>
 </tr>
 <tr bgcolor="#FFFFFF">
  <td height="22" align="right">会员价:</td>
  <td height="22" align="left"><input name="会员价" type="text" id="会员价" size="10"></td>
 </tr>
 <tr bgcolor="#FFFFFF">
  <td height="22" align="right">提供厂商:</td>
  <td height="22" align="left"><input name="提供厂商" type="text" id="提供厂商" size="30" maxlength="50"></td>
 </tr>
 <tr bgcolor="#FFFFFF">
  <td height="22" align="right">商品简介:</td>
  <td height="22" align="left"><textarea name="商品简介" cols="35" rows="4" id="商品简介"></textarea></td>
 </tr>
 <tr bgcolor="#FFFFFF">
  <td height="22" align="right">商品数量:</td>
  <td height="22" align="left"><input name="商品数量" type="text" id="商品数量" size="10"></td>
 </tr>
 <tr bgcolor="#FFFFFF">
  <td height="22" colspan="2" align="center"><input name="add" type="submit" id="add2" value="添 加">
 
 <input type="reset" name="Submit2" value="重 置"></td>
 </tr>
 </form>
 </table></td>
 </tr>
</table>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
js 数值项目的格式化函数代码
May 14 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
返回上一个url并刷新界面的js代码
Sep 12 Javascript
javascript常用的方法整理
Aug 20 #Javascript
JS实现的Select三级下拉菜单代码
Aug 20 #Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 #Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 #Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 #Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 #Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 #Javascript
You might like
PHPlet在Windows下的安装
2006/10/09 PHP
PHP比你想象的好得多
2014/11/27 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python中字典(Dictionary)用法实例详解
2015/05/30 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
python学生信息管理系统实现代码
2019/12/17 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
可口可乐广告词
2014/03/20 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
学生病假条怎么写
2015/08/17 职场文书
Python 全局空间和局部空间
2022/04/06 Python