search

Home >Web Front-end >JS Tutorial >js implements multi-level cascading menu code on web pages_javascript skills

js implements multi-level cascading menu code on web pages_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:43:591273browse

The example in this article describes how to implement multi-level cascading menus on web pages using js. Share it with everyone for your reference. The details are as follows:

This is a cascading menu effect that you often see on web pages. However, this code is implemented by JS. The contents of the cascading menu are saved in a JS array. In order to make the page beautiful, it is also beautified this time. After checking the table borders, the overall look is more harmonious and practical. The multi-level drop-down menu is more practical for web design.

The operation effect is as shown below:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-table-select-menu-style-codes/

The specific code is as follows: 

<!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>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jquery Easyui rapid development summary_jqueryNext article：jquery Easyui rapid development summary_jquery

Related articles

See more