JS三级联动菜单 修改容错10/03/2007
很多的时候都是用二级联动菜单就够了，最近的一个案子里面，需要管理章、节、小节的内容，于是不得不对其进行扩展，因为收集过二级的联动，找了个改了一下，哈哈，JS三级联动菜单就这样子实现了，因为偶用PHP生成JS使用的数组，会在最后出现一个逗号，如果不修正的话，用户不小心选择到该项，脚本即会出错，于是加了句容错代码。用到三维数组，操纵起来有一点点的麻烦。闲话不絮，贴上代码吧！
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <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> |
我本地测试是成功的，而且值也能正确的传过去~
