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