<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript" >
function initialize(){
var categoryArray = new Array(3);
categoryArray[0] =document.getElementById("categorys1").value;
categoryArray[1] =document.getElementById("categorys2").value;
categoryArray[2] =document.getElementById("categorys3").value;
//分每一条记录
var seasonArray =categoryArray[0].split(";");
var environmentArray =categoryArray[1].split(";");
var ageArray =categoryArray[2].split(";");
var sumArray = new Array(seasonArray,environmentArray,ageArray); // alert('111:'+sumArray[0].length);
// alert('111:'+sumArray[0][0]);
// alert('111:'+sumArray[0][1]);
// alert('222:'+sumArray[1].length);
// alert('333:'+sumArray[2].length);
var selected = document.getElementById("category").value;
var spnCategory = document.getElementById("spnCategory");
if(selected ==""){
selected =0;
}
// alert('aaa:'+selected);
var spnhtml;
var num=selected;
var num2 =selected;
num =selected+1;
if(num >3){
num=0
}
num2=num+1;
if(num2 >3){
num2=0
}
spnhtml = "<table>"; for(var i =0;i<sumArray[selected].length;i++){
var tmpArray1 =sumArray[selected][i].split(",");
spnhtml =spnhtml+"<tr onClick='display(""+tmpArray1[2]+"")'><td>"+tmpArray1[1]+"</td></tr>";//第一级
spnhtml =spnhtml+"<tr id='"+tmpArray1[2]+"'><td></td><td><table>";//第二级开始 for(var j=0;j<sumArray[num].length;j++){
var tpmArray2 =sumArray[num][j].split(",");
spnhtml =spnhtml+"<tr onClick='display(""+tmpArray1[2]+tpmArray2[2]+"")' ><td>"+tpmArray2[1]+"</td></tr>"
spnhtml =spnhtml+"<tr id='"+tmpArray1[2]+tpmArray2[2]+"'><td></td><td><table>";//第三级
for(var k =0;k<sumArray[num2].length;k++){
var tmpArray3=sumArray[num2][k].split(",")
spnhtml =spnhtml+"<tr><td>"+tmpArray3[1]+"</td></tr>";
}
spnhtml = spnhtml+"</td></tr></table>";
}
spnhtml =spnhtml+"</table>";
}
spnCategory.innerHTML =spnhtml;
document.getElementById('test').value =spnhtml;
}
function display(code){
var obj =document.getElementById(code);
if(obj){
// alert('111111');
if(obj.style.display =='none'){
// alert('222222');
obj.style.display='block';
}else{
// alert('333333');
obj.style.display='none';
}
}
}
</script>
</head>当选择第一项-按季节的时候就会报错为空或者不是对象,但是另外的选项就可以顺利通过,要崩溃,please,tell me why.
<body>
<input type="text" name="categorys1" id="categorys1" value="0,冬季,01;0,夏季,02" />
<input type="text" name="categorys2" id="categorys2" value="1,室内鞋,aa;1,沙滩鞋,bb;1,休闲鞋,cc;1,运动鞋,dd" />
<input type="text" name="categorys3" id="categorys3" value="2,成年男鞋,AA;2,成年女鞋,BB;2,童鞋,CC" />
<input type="text" name="test" id="test"/>
<table>
<tr><td>选择分类模式:</td>
<td>
<select name="category" id="category" onChange="initialize()">
<optgroup>
<option value="0">按季节</option>
<option value="1">按风格</option>
<option value="2">按年龄段</option>
</optgroup>
</select>
</td>
</tr>
</table>
<span id="spnCategory">
<table>
<tr onClick="display('01')"><td colspan="6">冬季</td></tr>
<tr id="01"><td width="21"></td>
<td width="289" colspan="5"><table>
<tr onClick="display('01aa')"><td colspan="6">室内鞋</td></tr>
<tr id="01aa"><td width="19"></td>
<td width="259" colspan="5"><table>
<tr><td width="252">成年男鞋</td>
</tr>
<tr><td width="252">成年女鞋</td>
</tr>
<tr><td width="252">童鞋</td>
</tr>
</table></td></tr>
<tr onClick="display('01bb')"><td colspan="6">沙滩鞋</td></tr>
<tr id="01bb"><td width="19"></td>
<td width="259" colspan="5"><table>
<tr><td width="252">成年男鞋</td>
</tr>
<tr><td width="252">成年女鞋</td>
</tr>
<tr><td width="252">童鞋</td>
</tr>
</table></td></tr>
<tr onClick="display('01cc')"><td colspan="6">休闲鞋</td></tr>
<tr id="01cc"><td width="19"></td>
<td width="259" colspan="5"><table>
<tr><td width="252">成年男鞋</td>
</tr>
<tr><td width="252">成年女鞋</td>
</tr>
<tr><td width="252">童鞋</td>
</tr>
</table></td></tr>
<tr onClick="display('01dd')"><td colspan="6">运动鞋</td></tr>
<tr id="01dd"><td width="19"></td>
<td width="259" colspan="5"><table>
<tr><td width="252">成年男鞋</td>
</tr>
<tr><td width="252">成年女鞋</td>
</tr>
<tr><td width="252">童鞋</td>
</tr>
</table></td></tr>
</table> </td></tr>
<tr onClick="display('02')"><td colspan="6">夏季</td></tr>
<tr id="02"><td width="21"></td>
<td width="289" colspan="5"><table>
<tr onClick="display('02aa')"><td colspan="6">室内鞋</td></tr>
<tr id="02aa"><td width="19"></td>
<td width="259" colspan="5"><table>
<tr><td width="252">成年男鞋</td>
</tr>
<tr><td width="252">成年女鞋</td>
</tr>
<tr><td width="252">童鞋</td>
</tr>
</table></td></tr>
<tr onClick="display('02bb')"><td colspan="6">沙滩鞋</td></tr>
<tr id="02bb"><td width="19"></td>
<td width="259" colspan="5"><table>
<tr><td width="252">成年男鞋</td>
</tr>
<tr><td width="252">成年女鞋</td>
</tr>
<tr><td width="252">童鞋</td>
</tr>
</table></td></tr>
<tr onClick="display('02cc')"><td colspan="6">休闲鞋</td></tr>
<tr id="02cc"><td width="19"></td>
<td width="259" colspan="5"><table>
<tr><td width="252">成年男鞋</td>
</tr>
<tr><td width="252">成年女鞋</td>
</tr>
<tr><td width="252">童鞋</td>
</tr>
</table></td></tr>
<tr onClick="display('02dd')"><td colspan="6">运动鞋</td></tr>
<tr id="02dd"><td width="19"></td>
<td width="259" colspan="5"><table>
<tr><td width="252">成年男鞋</td>
</tr>
<tr><td width="252">成年女鞋</td>
</tr>
<tr><td width="252">童鞋</td>
</tr>
</table></td></tr>
</table> </td></tr>
<tr></tr>
</table>
</span>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript" >
function initialize(){
var categoryArray = new Array(3);
categoryArray[0] =document.getElementById("categorys1").value;
categoryArray[1] =document.getElementById("categorys2").value;
categoryArray[2] =document.getElementById("categorys3").value;
//分每一条记录
var seasonArray =categoryArray[0].split(";");
var environmentArray =categoryArray[1].split(";");
var ageArray =categoryArray[2].split(";");
var sumArray = new Array(seasonArray,environmentArray,ageArray); // alert('111:'+sumArray[0].length);
// alert('111:'+sumArray[0][0]);
// alert('111:'+sumArray[0][1]);
// alert('222:'+sumArray[1].length);
// alert('333:'+sumArray[2].length);
var selected = document.getElementById("category").value;
var spnCategory = document.getElementById("spnCategory");
if(selected ==""){
selected =0;
}
// alert('aaa:'+selected);
var spnhtml;
var num=selected;
var num2 =selected;
num =parseInt(selected,10)+1;
if(num>=3){
num=0
}
num2=parseInt(num,10)+1;
if(num2>=3){
num2=0
}
spnhtml = "<table>";
for(var i =0;i<sumArray[selected].length;i++){
var tmpArray1 =sumArray[selected][i].split(",");
spnhtml =spnhtml+"<tr onClick='display(""+tmpArray1[2]+"")'><td>"+tmpArray1[1]+"</td></tr>";//第一级
spnhtml =spnhtml+"<tr id='"+tmpArray1[2]+"'><td></td><td><table>";//第二级开始
for(var j=0;j<sumArray[num].length;j++){
var tpmArray2 =sumArray[num][j].split(",");
spnhtml =spnhtml+"<tr onClick='display(""+tmpArray1[2]+tpmArray2[2]+"")' ><td>"+tpmArray2[1]+"</td></tr>"
spnhtml =spnhtml+"<tr id='"+tmpArray1[2]+tpmArray2[2]+"'><td></td><td><table>";//第三级
for(var k =0;k<sumArray[num2].length;k++){
var tmpArray3=sumArray[num2][k].split(",")
spnhtml =spnhtml+"<tr><td>"+tmpArray3[1]+"</td></tr>";
}
spnhtml = spnhtml+"</td></tr></table>";
}
spnhtml =spnhtml+"</table>";
}
spnCategory.innerHTML =spnhtml;
document.getElementById('test').value =spnhtml;
}
function display(code){
var obj =document.getElementById(code);
if(obj){
// alert('111111');
if(obj.style.display =='none'){
// alert('222222');
obj.style.display='block';
}else{
// alert('333333');
obj.style.display='none';
}
}
}
</script>
</head>
Document : kindselect2
Created on : 2009-9-11, 6:37:49
Author : Administrator
--%><%@page import="com.db.DBCategory" contentType="text/html" pageEncoding="UTF-8"%><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<style type="text/css">
tr{
cursor:hand;
padding:2px 8px 0pt 3px;
}
body,td{
font-size: 12px;
}
</style>
<script type="text/javascript" >
function initialize(){
var categoryArray = new Array(3);
categoryArray[0] =document.getElementById("categorys1").value;
categoryArray[1] =document.getElementById("categorys2").value;
categoryArray[2] =document.getElementById("categorys3").value;
//分每一条记录
var seasonArray =categoryArray[0].split(";");
var environmentArray =categoryArray[1].split(";");
var ageArray =categoryArray[2].split(";");
var sumArray = new Array(seasonArray,environmentArray,ageArray);
var selected = document.getElementById("category").value;
var spnCategory = document.getElementById("spnCategory");
if(selected ==""){
selected =0;
}
if(selected =='0'){
// alert('aaaaaa');
selected =parseInt(selected);
}
var spnhtml;
var num=selected;
var num2 =selected;
num =selected+1;
if(num >3){
num=0
}
num2=num+1;
if(num2 >3){
num2=0
}
spnhtml = "<table>";
//第一级
for(var i =0;i<sumArray[selected].length;i++){
var tmpArray1 =sumArray[selected][i].split(",");
spnhtml =spnhtml+"<tr onClick='display(""+tmpArray1[2]+"")'><td>"+tmpArray1[1]+"</td></tr>";
spnhtml =spnhtml+"<tr id='"+tmpArray1[2]+"' style='display:none'><td></td><td><table>";
//第二级开始
for(var j=0;j<sumArray[num].length;j++){
var tpmArray2 =sumArray[num][j].split(",");
spnhtml =spnhtml+"<tr onClick='display(""+tmpArray1[2]+tpmArray2[2]+"")' ><td>"+tpmArray2[1]+"</td></tr>"
spnhtml =spnhtml+"<tr id='"+tmpArray1[2]+tpmArray2[2]+"' style='display:none'><td></td><td><table>";
//第三级
for(var k =0;k<sumArray[num2].length;k++){
var tmpArray3=sumArray[num2][k].split(",")
spnhtml =spnhtml+"<tr><td>"+tmpArray3[1]+"</td></tr>";
} spnhtml = spnhtml+"</td></tr></table>";
} spnhtml =spnhtml+"</table>";
}
spnCategory.innerHTML =spnhtml;
document.getElementById('test').value =spnhtml;
}
function display(code){
var obj =document.getElementById(code);
if(obj){
// alert('111111');
if(obj.style.display =='none'){
// alert('222222');
obj.style.display='block';
}else{
// alert('333333');
obj.style.display='none';
}
}
}
</script>
</head>
<body>
<%
DBCategory dbc = new DBCategory();
String[] categorys = dbc.getAllCategory();
%>
<input type="text" name="categorys1" id="categorys1" value="<%=categorys[0]%>" />
<input type="text" name="categorys2" id="categorys2" value="<%=categorys[1]%>" />
<input type="text" name="categorys3" id="categorys3" value="<%=categorys[2]%>" />
<input type="text" name="test" id="test"/>
<table>
<tr><td>选择分类模式:</td>
<td>
<select name="category" id="category" onChange="initialize()">
<optgroup>
<option value="0">按季节</option>
<option value="1">按风格</option>
<option value="2">按年龄段</option>
</optgroup>
</select>
</td>
</tr>
</table>
<span id="spnCategory">
<script>
initialize();
</script>
</span>
</body>
</html>
num =parseInt(selected,10)+1;
if(num>=3){
num=0
}
num2=parseInt(num,10)+1;
if(num2>=3){
num2=0
}