引用 | 編輯
kimopig
2008-10-25 01:28 |
樓主
|
||
x0
可以幫我看看上面這個網頁有什麼地方錯了找好久還是看不出那裡錯了 只要選cat2再選小類就會出現 'length'是null 或不是一個物件 但是選cat1就正常了 複製程式 <html> <head> <style type="text/css"> <!-- .style1 { color: #CCCCCC; font-size: 12px; } --> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> </head> <body> <!-- .style1 {font-weight: bold} .style2 {font-weight: bold} --> </style> <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div> <p> <html><head><script> var getData = function(){ var sel = [ [1,"cat1", [1,"subcat1", [1,"product1"], [2,"product2"] ], [2,"subcat2", [3,"product3"], [4,"product4"] ] ], [2,"cat2", [3,"subcat3", [5,"product5"], [6,"product6"] ], [4,"subcat4", [7,"product7"], [8,"product8"] ] ], [3,"cat3", [5,"subcat5", [9,"product9"], [10,"product10"] ], [6,"subcat6", [11,"product11"], [12,"product12"] ] ], [4,"cat4", [7,"subcat7", [13,"product13"], [14,"product14"] ], [8,"subcat8", [15,"product15"], [16,"product16"] ] ] ]; return sel; } </script> </head> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <script type="text/javascript" src="adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-all.js"></script> <script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript" src="jquery/jquery.cascade.js"></script> <script type="text/javascript" src="jquery/jquery.cascade.ext.js"></script> <script type="text/javascript" src="jquery/jquery.templating.js"></script> <link rel="stylesheet" type="text/css" href="css/ext-all.css"> <form id="form2" method="post"> <h3>表單範例</h3> <table width="97%" border="2"> <tr> <th width="22%" scope="col"><div align="center"><b>大類名稱</b></div></th> <th width="22%" scope="col"><div align="center"><b>小類名稱</b></div></th> <th width="22%" scope="col"><div align="center"><b>產品名稱</b></div></th> </tr> <tr> <th scope="row"><div align="center"> <select name="cat" id="cat_id" onChange="SELCTL.changecat(this)"> <option value="0">請選擇大類名稱</option> </select> </div></th> <td><div align="center"> <select name="subcat" id="subcat_id" onChange="SELCTL.changesubcat(this)"> <option value="0">請選擇小類名稱</option> </select> </div></td> <td><div align="center"> <select name="product" id="product_id" onChange="SELCTL.changeproduct(this)"> <option value="0">請選擇產品名稱</option> </select> </div></td> </tr> <tr> <th scope="row"><div align="center"> <input type="button" name="Submit" value="新增大類名稱"> </div></th> <td><div align="center"> <input type="button" name="Submit4" value="新增小類名稱"> </div></td> <td><div align="center"> <input type="button" name="Submit7" value="新增產品名稱"> </div></td> </tr> <tr> <th scope="row"><div align="center"> <input type="button" name="Submit2" value="修改大類名稱"> </div></th> <td><div align="center"> <input type="button" name="Submit5" value="修改小類名稱"> </div></td> <td><div align="center"> <input type="button" name="Submit8" value="修改產品名稱"> </div></td> </tr> <tr> <th scope="row"><div align="center"> <input type="button" name="Submit3" value="刪除大類名稱"> </div></th> <td><div align="center"> <input type="button" name="Submit6" value="刪除小類名稱"> </div></td> <td><div align="center"> <input type="button" name="Submit9" value="刪除產品名稱"> </div></td> </tr> </table> <p> </p> </form> <script> (function(){ var sel = getData(); var target = document.getElementById("cat_id"); target.innerHTML = ""; var tmp = document.createElement("option"); tmp.value = 0; tmp.appendChild(document.createTextNode("請選擇大類名稱")); target.appendChild(tmp); for (var i =0; i<sel.length; i++) { tmp = document.createElement("option"); tmp.value = sel[i][0]; tmp.appendChild(document.createTextNode(sel[i][1])); target.appendChild(tmp); } })(); var SELCTL = { changecat : function(obj) { this.selcat = obj.value; if(obj.value>0) { var sel = getData(); var target = document.getElementById("subcat_id"); target.innerHTML = ""; var tmp = document.createElement("option"); tmp.value = 0; tmp.appendChild(document.createTextNode("請選擇小類名稱")); target.appendChild(tmp); for (var i=2; i<sel[this.selcat-1].length; i++) { tmp = document.createElement("option"); tmp.value = sel[this.selcat-1][i][0]; tmp.appendChild(document.createTextNode(sel[this.selcat-1][i][1])); target.appendChild(tmp); } } }, changesubcat : function(obj) { this.selsubcat = obj.value; if(obj.value>0) { var sel = getData(); var target = document.getElementById("product_id"); target.innerHTML = ""; var tmp = document.createElement("option"); tmp.value = 0; tmp.appendChild(document.createTextNode("請選擇產品名稱")); target.appendChild(tmp); for (var i=2; i<sel[this.selcat-1][this.selsubcat-(-1)].length; i++) { tmp = document.createElement("option"); tmp.value = sel[this.selcat-1][this.selsubcat-(-1)][i][0]; tmp.appendChild(document.createTextNode(sel[this.selcat-1][this.selsubcat-(-1)][i][1])); target.appendChild(tmp); } } }, changeproduct : function(obj) { this.selproduct = obj.value if(obj.value>0) { alert(obj.value); } }, selcat:0, selsubcat:0, selproduct:0 }; </script> </body> </html> x0
|