马上注册,自学更多教程,下载更多资源。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本文真例报告了js完成网页多级级联菜单。分享给各人供各人参考。详细以下:
那是各人正在网页上常常会晤到的级联菜单殊效,不外那一个代码是由JS去完成,将级联菜单中的内乱容保留正在了JS数组中,为了页里美妙,本次借好化了一下表格边框,团体看上来更调和适用了,多级的下推菜单对网页设想来讲比力适用。
运转结果以下图所示:
2015820114332874.jpg
详细代码以下:
多级级联菜单
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  6. <title>多级级联菜单</title>
  7. <script type="text/javascript">
  8. var arr2 = new Array(4);
  9. arr2["数码装备"] = new Array("数码相机","挨印机");
  10. arr2["家用电器"] = new Array("电视机","电冰箱");
  11. arr2["礼物工艺"] = new Array("陈花","彩带");
  12. function removeinfo(classMenu){//将下推框各选项浑空
  13. for (var i=0; i < classMenu.options.length; i++){
  14. classMenu.options[i]=null;
  15. }
  16. }
  17. function changeMenu(classList,classMenu){
  18. removeinfo(classMenu)
  19. for (var i=0; i < classList.length; i++){
  20. classMenu[i]=new Option(classList[i],classList[i]);
  21. }
  22. }
  23. </script>
  24. </head>
  25. <body style="font-size:12px">
  26. <table width="487" height="333" border="0" align="center" cellpadding="0" cellspacing="0">
  27. <tr>
  28. <td align="center" valign="top"><br>
  29. <br>
  30. <br>
  31. <br> <br> <table width="86%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#6699CC">
  32. <form name="form1">
  33. <tr bgcolor="#FFFFFF">
  34.   <td height="22" align="right">所属种别:</td>
  35.   <td height="22" align="left"><select name="种别" id="种别" onChange="changeMenu(arr2[document.form1.种别.options[document.form1.种别.selectedIndex].text],document.form1.分类);">
  36.   <option selected>数码装备</option>
  37.   <option>家用电器</option>
  38.   <option>礼物工艺</option>
  39.   </select>
  40.   <select name="分类" id="分类">
  41.   <option>数码相机</option>
  42.   <option>挨印机</option>
  43.   </select></td>
  44. </tr>
  45. <tr bgcolor="#FFFFFF">
  46.   <td height="22" align="right">商品称号:</td>
  47.   <td height="22" align="left"><input name="商品称号" type="text" id="商品称号" size="30" maxlength="50"></td>
  48. </tr>
  49. <tr bgcolor="#FFFFFF">
  50.   <td height="22" align="right">会员价:</td>
  51.   <td height="22" align="left"><input name="会员价" type="text" id="会员价" size="10"></td>
  52. </tr>
  53. <tr bgcolor="#FFFFFF">
  54.   <td height="22" align="right">供给厂商:</td>
  55.   <td height="22" align="left"><input name="供给厂商" type="text" id="供给厂商" size="30" maxlength="50"></td>
  56. </tr>
  57. <tr bgcolor="#FFFFFF">
  58.   <td height="22" align="right">商品简介:</td>
  59.   <td height="22" align="left"><textarea name="商品简介" cols="35" rows="4" id="商品简介"></textarea></td>
  60. </tr>
  61. <tr bgcolor="#FFFFFF">
  62.   <td height="22" align="right">商品数目:</td>
  63.   <td height="22" align="left"><input name="商品数目" type="text" id="商品数目" size="10"></td>
  64. </tr>
  65. <tr bgcolor="#FFFFFF">
  66.   <td height="22" colspan="2" align="center"><input name="add" type="submit" id="add2" value="加 减">

  67. <input type="reset" name="Submit2" value="重 置"></td>
  68. </tr>
  69. </form>
  70. </table></td>
  71. </tr>
  72. </table>
  73. </body>
  74. </html>
复造代码




上一篇:获得iframe女页里声明的变量值,获得iframe女页面临象
下一篇:网站中利用的强迫面击告白的几种代码

云码酷-站长自学网 - 论坛版权1、本主题所有言论和图片纯属会员个人意见,与本论坛立场无关
2、本站所有主题由该帖子作者发表,该帖子作者与云码酷-站长自学网享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和云码酷-站长自学网的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
7、云码酷-站长自学网管理员和版主有权不事先通知发贴者而删除本文

回复

使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    0

    主题

    177

    帖子

    177

    积分

    注册会员

    Rank: 2

    积分
    177
    发表于 2018-4-22 06:48:26 | 显示全部楼层
    沙发
    是爷们的娘们的都帮顶!大力支持
    回复 支持 反对

    使用道具 举报

    0

    主题

    172

    帖子

    172

    积分

    注册会员

    Rank: 2

    积分
    172
    发表于 2018-4-22 19:52:44 | 显示全部楼层
    板凳
    我是个凑数的。。。
    回复 支持 反对

    使用道具 举报

    2

    主题

    175

    帖子

    177

    积分

    注册会员

    Rank: 2

    积分
    177
    发表于 2018-4-23 09:03:59 来自手机 | 显示全部楼层
    地板
    楼下的接上
    回复 支持 反对

    使用道具 举报

    1

    主题

    152

    帖子

    153

    积分

    注册会员

    Rank: 2

    积分
    153
    发表于 2018-4-24 01:37:54 | 显示全部楼层
    5#
    专业抢沙发的!哈哈
    回复 支持 反对

    使用道具 举报

    1

    主题

    164

    帖子

    165

    积分

    注册会员

    Rank: 2

    积分
    165
    发表于 2018-4-24 11:28:41 来自手机 | 显示全部楼层
    6#
    我擦!我要沙发!
    回复 支持 反对

    使用道具 举报

    0

    主题

    148

    帖子

    148

    积分

    注册会员

    Rank: 2

    积分
    148
    发表于 2018-4-25 00:40:23 | 显示全部楼层
    7#
    路过 帮顶 嘿嘿
    回复 支持 反对

    使用道具 举报

    0

    主题

    157

    帖子

    157

    积分

    注册会员

    Rank: 2

    积分
    157
    发表于 2018-4-25 20:53:10 | 显示全部楼层
    8#
    垃圾内容,路过为证。
    回复 支持 反对

    使用道具 举报

    1

    主题

    184

    帖子

    185

    积分

    注册会员

    Rank: 2

    积分
    185
    发表于 2018-4-26 22:37:23 来自手机 | 显示全部楼层
    9#
    看帖要回,回帖才健康,在踩踩,楼主辛苦了!
    回复 支持 反对

    使用道具 举报

    0

    主题

    177

    帖子

    177

    积分

    注册会员

    Rank: 2

    积分
    177
    发表于 2018-4-27 02:17:19 来自手机 | 显示全部楼层
    10#
    在撸一遍。。。
    回复 支持 反对

    使用道具 举报

    • 售后服务
    • 关注我们
    • 社区新手

    申请友链|Archiver|手机版|小黑屋|云码酷-站长自学网 ( 京ICP备13037810号 )

    Powered by Discuz! X3.2  © 2001-2022 云码酷