JS三级联动菜单修改容错

中秋月圆，我的亲朋好友，你们好吗？

装上宽带了，不再被人BS买电脑不装宽带了

Large | Medium | Small

gently , Oct/3/10:52 , UI , Comments(0) , Trackbacks(0) , Reads(902) , From Original

很多的时候都是用二级联动菜单就够了，最近的一个案子里面，需要管理章、节、小节的内容，于是不得不对其进行扩展，因为收集过二级的联动，找了个改了一下，哈哈，JS三级联动菜单就这样子实现了，因为偶用PHP生成JS使用的数组，会在最后出现一个逗号，如果不修正的话，用户不小心选择到该项，脚本即会出错，于是加了句容错代码。用到三维数组，操纵起来有一点点的麻烦。闲话不絮，贴上代码吧！

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>章节管理 DEMO</title>
</head>
<body>
<SCRIPT type="text/JavaScript">
var fMenu = ["第一章 成功是逼出来的","第二章 人性的弱点","第三章 烟、寂寞","第四章 公交车降价了","第八章",]
var fValue = ["1","2","3","4","8",]
var sMenu = [["第一节 广播体操","第二节 卡耐基","第三节 行动力","第四节 执行力","第五节 忠诚度",],["第一节 男人一定要积极","第二节 上帝造人也会发脾气的","第三节 333",],["都来当兵吧","人不能无耻到这种地步",],["第一节","第二节",],["第一节",],]
var sValue = [["1","2","3","4","5",],["1","2","3",],["1","2",],["1","2",],["1",],]
var gMenu=[[["第一小节","第二小节","第三小节"],["第1章第2节第1小节","第1章第二节第二小节"]],[["第2章第1节第一小节"],["第2章第2节第1小节"],["第2章第3节第1小节"]]]
var gValue=[[["1","2","3"],["1","2",]],[["1",],["1",],["1",]]]
var oWhere = document.all.tar;
var ofMenu = document.createElement("<SELECT name='postChapter'>");
var osMenu = document.createElement("<SELECT name='postSection'>");
var ogMenu=document.createElement("<SELECT name='postSonsection'>");

with(oWhere)appendChild(ofMenu),appendChild(osMenu),appendChild(ogMenu);
createMainOptions();
createSubOptions(0);
createGrandOptions(0,0);
ofMenu.onchange = function() {createSubOptions(this.selectedIndex);createGrandOptions(this.selectedIndex,osMenu.selectedIndex)};
osMenu.onchange = function() {createGrandOptions(ofMenu.selectedIndex,this.selectedIndex);};
function createMainOptions() {
 for(var i=0;i<fMenu.length;i++)ofMenu.options[i] = new Option(fMenu
[i],fValue[i]);
}
function createSubOptions(j) {
 with(osMenu) {
  length=0;
  if(sMenu[j]){
    for(var i=0;i<sMenu[j].length;i++)
      osMenu.options[i] = new Option(sMenu[j][i],sValue[j][i]);
  }
 }
}
function createGrandOptions(y,z){
  with(ogMenu){
    length=0;
    if(gMenu[y]){
      if(gMenu[y][z]){
        for(var x=0;x<gMenu[y][z].length;x++){
          ogMenu.options[x]=new Option(gMenu[y][z][x],gValue[y][z][x]);
        }
      }
    }
  }
}
</SCRIPT>
<table width='100%' cellspacing='0' cellpadding='0'>
<tr>
  <td style='padding-left:20px;height:28px;'>添加小节</td>
</tr>
</table><div style='display:none'><form method='post' name='form' action='http://localhost:8080/myphppro/post.php'></div>
<table width='100%' cellspacing='0' cellpadding='0'>
<tr>
  <td style='width:21%;height:28px;' align='right'>&nbsp;归属：</td>
  <td align='left'><div id='tar'></div></td>
</tr>
</table>
<table width='100%' cellspacing='0' cellpadding='0'>
<tr>
  <td style='width:21%;height:28px;' align='right'>&nbsp;</td>
  <td align='left'> <input type='submit' value='提 交'></td>
</tr>
</table></form>

</body>
</html>

我本地测试是成功的，而且值也能正确的传过去~