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 相关文章推荐
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
微信小程序实现拖拽功能
Sep 26 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
第一个无线电台是由谁发明的
2021/03/01 无线电
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
Python实现求笛卡尔乘积的方法
2017/09/16 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
python类中super() 的使用解析
2019/12/19 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
python文件排序的方法总结
2020/09/13 Python
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
Europcar比利时:租车
2019/08/26 全球购物
营业员演讲稿
2013/12/30 职场文书
承认错误的检讨书
2014/01/30 职场文书
生产文员岗位职责
2014/04/05 职场文书
医学专业自荐信
2014/06/14 职场文书
工作检讨书范文
2015/01/23 职场文书
物资采购管理制度
2015/08/06 职场文书
2019秋季运动会口号
2019/06/25 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
Python 线程池模块之多线程操作代码
2021/05/20 Python