搞了好几天，可变（可增减）的多个二级联动菜单有关问题

2012-02-15

搞了好几天，可变（可增减）的多个二级联动菜单问题？如何增减菜单时，连动菜单也能起作用。//一级菜单内容varpr

搞了好几天，可变（可增减）的多个二级联动菜单问题？
如何增减菜单时，连动菜单也能起作用。
//一级菜单内容
var pri_type = [ "产品1 ", "产品2 ", "产品3 ", "其他 "];
//以下为二级菜单内容
var sec_type1 =[ "蔬菜 ", "副食 ", "水产品 "];
var sec_type2 = [ "水果 ", "粮食 ", "油料 ", "其它 "];
var sec_type3 = [ "特产 ", "茶叶 ", "其它 "];
var sec_type4 = [ "其它 "];

下面是增减菜单功能，如何加上联动菜单功能？

<body>

<script language=javascript>
ii=1;
var Main_Tab= mytable;
var cur_row= null;
var cur_col= null;
var the_table=Main_Tab;
function addrow()
{
ii++;
str_sel1= ' <select name= "headtype1_ '+ii+ ' " > <option selected= "selected " value= " "> 产品1  </option> " '+
' <option value= "产品1 "> 产品1 </option> '+
' <option value= "产品2 "> 产品2 </option> '+
' <option value= "产品3 "> 产品3 </option> '+
' <option value= "其他 "> 其他 </option> '+
' </select> ';
str_sel2= ' <select name= "headtype2_ '+ii+ ' "> <option selected= "selected " value= " "> 蔬菜 </option> " '+
' <option value= "副食 "> 副食 </option> '+
' <option value= "水产品 "> 水产品 </option> '+
' <option value= "其他 "> 其它 </option> '+
' </select> ';
str = document.all.mytable.outerHTML;
str = str.substring(0,str.length-16);

str += ' <tr> <td align= "center "> '+ ii + ' </td> ';
str += ' <td align= "center "> '+str_sel1+ ' </td> ';
str += ' <td align= "center "> '+str_sel2+ ' </td> ';
str += ' <td align= "center "> <input type= "text " name= "Field4 " size= "20 "> </td> ';
str += ' <td align= "center "> <input type= "text " name= "Field5 " size= "20 "> <select name=dw_ "+ i + " > '+

' <option selected= "selected " value= "元/斤 "> 元/斤 </option> '+
' <option value= "元/公斤 "> 元/公斤 </option> '+
' </select> </td> </tr> </TBody> </Table> ';
document.all.mytable.outerHTML = str;
}

function delTblRows()
{
if (ii==1) return;
mytable.deleteRow(ii);
ii--;
}
</script>
<form method= "POST " action= " ">
<table id= "mytable " align= "center ">
<tr>
<td align= "center "> 序号 </td>
<td align= "center "> 产品类型 </td>
<td align= "center "> 子类 </td>
<td align= "center "> 名称 </td>
<td align= "center "> 价格(单位要选) </td>
</tr>
<tr>

<td align= "center "> 1 </td>

<td align= "center "> <select name= "headship1_1 ">
<option selected= "selected " value= " "> 产品1  </option>
<option value= "产品1 "> 产品1 </option>
<option value= "产品2 "> 产品2 </option>
<option value= "产品3 "> 产品3 </option>
<option value= "其他 "> 其他 </option>
</select>
</td>

<td align= "center "> <select name= "headship2_1 ">
<option selected= "selected " value= " "> 蔬菜 </option>

<option value= "副食 "> 副食 </option>
<option value= "水产品 "> 水产品 </option>
<option value= "其他 "> 其他 </option>
</select> </td>
<td align= "center "> <input type= "text " name= "Field4 " size= "20 "> </td>
<td align= "center "> <input type= "text " name= "Field5 " size= "20 "> <select name= "dw_1 " >
<option selected= "selected " value= "元/斤 "> 元/斤 </option>
<option value= "元/公斤 "> 元/公斤 </option>
</select> </td>
</tr>
</table>
<br>
<center>
<input type=button value= "继续添加 " name= "Cont " onclick=addrow()>    
<input type=button value= "删除最后一行 " name= "Cont " onclick=delTblRows()>    
</center>
</form>
</body>

[解决办法]
没太明白你的意思,不知道是不是你要的效果
<body>
<script language=javascript>
//一级菜单内容
var pri_type = [ "产品1 ", "产品2 ", "产品3 ", "其他 "];
//以下为二级菜单内容
var sec_type1 =[ "蔬菜 ", "副食 ", "水产品 "];
var sec_type2 = [ "水果 ", "粮食 ", "油料 ", "其它 "];
var sec_type3 = [ "特产 ", "茶叶 ", "其它 "];
var sec_type4 = [ "其它 "];
var ii=1;
var Main_Tab= mytable;
var cur_row= null;
var cur_col= null;
var the_table=Main_Tab;
function addrow()
{
ii++;
str_sel1= ' <select name= "headtype1_ '+ii+ ' " onChange= "ChangeSubList() "> <option selected= "selected " value= " "> 产品1  </option> " '+
' <option value= "产品1 "> 产品1 </option> '+
' <option value= "产品2 "> 产品2 </option> '+
' <option value= "产品3 "> 产品3 </option> '+
' <option value= "其他 "> 其他 </option> '+
' </select> ';
str_sel2= ' <select name= "headtype2_ '+ii+ ' "> <option selected= "selected " value= " "> 蔬菜 </option> " '+
' <option value= "副食 "> 副食 </option> '+
' <option value= "水产品 "> 水产品 </option> '+

' <option value= "其他 "> 其它 </option> '+
' </select> ';
str = document.all.mytable.outerHTML;
str = str.substring(0,str.length-16);

str += ' <tr> <td align= "center "> '+ ii + ' </td> ';
str += ' <td align= "center "> '+str_sel1+ ' </td> ';
str += ' <td align= "center "> '+str_sel2+ ' </td> ';
str += ' <td align= "center "> <input type= "text " name= "Field4 " size= "20 "> </td> ';
str += ' <td align= "center "> <input type= "text " name= "Field5 " size= "20 "> <select name=dw_ "+ i + " > '+
' <option selected= "selected " value= "元/斤 "> 元/斤 </option> '+
' <option value= "元/公斤 "> 元/公斤 </option> '+
' </select> </td> </tr> </TBody> </Table> ';
document.all.mytable.outerHTML = str;
}

function delTblRows()
{
if (ii==1) return;
mytable.deleteRow(ii);
ii--;
}

function ChangeSubList(e){
var srcEl,oTr,oSel,typeid;

if(document.all)
srcEl=event.srcElement;
else
srcEl=e.target;

oTr=srcEl.parentNode.parentNode;
oSel=oTr.cells[2].getElementsByTagName( 'select ')[0];
var arr=GetSubList(srcEl.value);
alert(arr.toString());

oSel.options.length=0;
for(var i=0;i <arr.length;i++){
oSel.options[i]=new Option(arr[i],arr[i]);
}
}

function GetSubList(parentTypeName){
if(parentTypeName== "产品1 ")
return sec_type1;
if(parentTypeName== "产品2 ")
return sec_type2;
if(parentTypeName== "产品3 ")
return sec_type3;
if(parentTypeName== "其他 ")
return sec_type4;
}
</script>
<form method= "POST " action= " ">
<table id= "mytable " align= "center ">
<tr>
<td align= "center "> 序号 </td>
<td align= "center "> 产品类型 </td>
<td align= "center "> 子类 </td>
<td align= "center "> 名称 </td>
<td align= "center "> 价格(单位要选) </td>
</tr>
<tr>

<td align= "center "> 1 </td>

<td align= "center "> <select name= "headship1_1 " onChange= "ChangeSubList() ">
<option selected= "selected " value= " "> 产品1  </option>
<option value= "产品1 "> 产品1 </option>
<option value= "产品2 "> 产品2 </option>
<option value= "产品3 "> 产品3 </option>
<option value= "其他 "> 其他 </option>
</select>
</td>

<td align= "center "> <select name= "headship2_1 ">
<option selected= "selected " value= " "> 蔬菜 </option>
<option value= "副食 "> 副食 </option>
<option value= "水产品 "> 水产品 </option>
<option value= "其他 "> 其他 </option>
</select> </td>
<td align= "center "> <input type= "text " name= "Field4 " size= "20 "> </td>
<td align= "center "> <input type= "text " name= "Field5 " size= "20 "> <select name= "dw_1 " >
<option selected= "selected " value= "元/斤 "> 元/斤 </option>
<option value= "元/公斤 "> 元/公斤 </option>
</select> </td>
</tr>
</table>
<br>
<center>
<input type=button value= "继续添加 " name= "Cont " onclick=addrow()>    
<input type=button value= "删除最后一行 " name= "Cont " onclick=delTblRows()>    
</center>
</form>
</body>
[解决办法]
<html>

<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 新建网页 1 </title>
<script language=javascript>
//一级菜单内容
var pri_type=[ "产品1 ", "产品2 ", "产品3 ", "其他 "];
//以下为二级菜单内容
var sec_type1=[ "蔬菜 ", "副食 ", "水产品 "];
var sec_type2=[ "水果 ", "粮食 ", "油料 ", "其它 "];
var sec_type3=[ "特产 ", "茶叶 ", "其它 "];
var sec_type4=[ "其它 "];
ii=1;
var Main_Tab=document.getElementById( "mytable ");
var cur_row= null;
var cur_col= null;
var the_table=Main_Tab;

function s_change(obj){
var i=0;
for(i=0;i <pri_type.length;i++){
if(obj.value==pri_type[i]){
break;
}
}
var s2=eval( "sec_type "+(i+1));
var o2=document.getElementsByName( "headship2_ "+obj.name.split( "_ ")[1])[0];
o2.innerHTML= " ";
for(var i=0;i <s2.length;i++){
var op=new Option(s2[i],s2[i]);
o2.add(op);
}
}
function addrow()
{
ii++;
str_sel1= ' <select name= "headship1_ '+ii+ ' " onchange= "s_change(this) "> '+
' <option value= "产品1 "> 产品1 </option> '+
' <option value= "产品2 "> 产品2 </option> '+
' <option value= "产品3 "> 产品3 </option> '+
' <option value= "其他 "> 其他 </option> '+
' </select> ';
str_sel2= ' <select name= "headship2_ '+ii+ ' "> '+
' <option value= "蔬菜 "> 蔬菜 </option> '+
' <option value= "副食 "> 副食 </option> '+
' <option value= "水产品 "> 水产品 </option> '+
' </select> ';
str = document.all.mytable.outerHTML;
str = str.substring(0,str.length-16);

str += ' <tr> <td align= "center "> '+ ii + ' </td> ';

str += ' <td align= "center "> '+str_sel1+ ' </td> ';
str += ' <td align= "center "> '+str_sel2+ ' </td> ';
str += ' <td align= "center "> <input type= "text " name= "Field4 " size= "20 "> </td> ';
str += ' <td align= "center "> <input type= "text " name= "Field5 " size= "20 "> <select name=dw_ "+ i + " > '+
' <option selected= "selected " value= "元/斤 "> 元/斤 </option> '+
' <option value= "元/公斤 "> 元/公斤 </option> '+
' </select> </td> </tr> </TBody> </Table> ';
document.getElementById( "mytable ").outerHTML = str;
}

function delTblRows()
{
if (ii==1) return;
document.getElementById( "mytable ").deleteRow(ii);
ii--;
}
</script>
</head>

<body>

<form method= "POST " action= " ">
<table id= "mytable " align= "center ">
<tr>
<td align= "center "> 序号 </td>
<td align= "center "> 产品类型 </td>
<td align= "center "> 子类 </td>
<td align= "center "> 名称 </td>
<td align= "center "> 价格(单位要选) </td>
</tr>
<tr>

<td align= "center "> 1 </td>

<td align= "center "> <select name= "headship1_1 " onchange= "s_change(this) ">
<option value= "产品1 "> 产品1 </option>
<option value= "产品2 "> 产品2 </option>
<option value= "产品3 "> 产品3 </option>
<option value= "其他 "> 其他 </option>
</select>
</td>

<td align= "center "> <select name= "headship2_1 ">
<option selected= "selected " value= " "> 蔬菜 </option>
<option value= "副食 "> 副食 </option>
<option value= "水产品 "> 水产品 </option>
<option value= "其他 "> 其他 </option>
</select> </td>
<td align= "center "> <input type= "text " name= "Field4 " size= "20 "> </td>
<td align= "center "> <input type= "text " name= "Field5 " size= "20 "> <select name= "dw_1 " >
<option selected= "selected " value= "元/斤 "> 元/斤 </option>
<option value= "元/公斤 "> 元/公斤 </option>
</select> </td>
</tr>
</table>
<br>
<center>
<input type=button value= "继续添加 " name= "Cont " onclick=addrow()>

热点排行

JavaScript

搞了好几天，可变（可增减）的多个二级联动菜单有关问题