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

hkwlk 2007-09-26 10:52:58
如何增减菜单时，连动菜单也能起作用。
//一级菜单内容
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"><input type="text" name="Field1" size="20"></td>-->
<td align="center">1</td>
<!-- <td align="center"><input type="text" name="Field2" size="20"></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"><input type="text" name="Field3" size="20"></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>
...全文
171 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
yifuzhiming 2007-09-26
  • 打赏
  • 举报
 回复
好象比较难
hkwlk 2007-09-26
  • 打赏
  • 举报
 回复
还是lihui_shine(浪尖賞花)的简明！
hkwlk 2007-09-26
  • 打赏
  • 举报
 回复
谢谢xingqiliudehuanghun() 和lihui_shine(浪尖賞花)！
愤怒的小蒋 2007-09-26
  • 打赏
  • 举报
 回复
好东西
浪尖赏花 2007-09-26
  • 打赏
  • 举报
 回复
<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"><input type="text" name="Field1" size="20"></td>-->
<td align="center">1</td>
<!-- <td align="center"><input type="text" name="Field2" size="20"></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"><input type="text" name="Field3" size="20"></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>

</html>
xingqiliudehuanghun 2007-09-26
  • 打赏
  • 举报
 回复
好好重写一下你的代码firefox下根本没办法运行
xingqiliudehuanghun 2007-09-26
  • 打赏
  • 举报
 回复
没太明白你的意思,不知道是不是你要的效果
<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"><input type="text" name="Field1" size="20"></td>-->
<td align="center">1</td>
<!-- <td align="center"><input type="text" name="Field2" size="20"></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"><input type="text" name="Field3" size="20"></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>
编程资料 －C# 多线程
编程资料 － 多线程 C#多线程编程实例实战 作者： 刘弹 www.ASPCool.com 时间:2003-5-17 上午 10:24:05 阅读次数:10996 单个... 问题的提出 所谓单个写入程序/多个阅读程序的线程同步问
百亿级日访问量的应用如何做缓存架构设计？
根据存的 ID 数量，实际上分成多个 Cache，普通的大概是 200 多条，如果长的大概是 2000 条。 第三层是一些关系， 它的关注、粉丝、用户。 第四层是内容， 每一条微博一些内容存在这里。 第五层就是一些存在性判断，...
【番外篇】2W字诚意满满的新活：常见接口测试69道面试题，附带答案
最近发现面试题热度 挺好的，不过大家博客都只有面试题，从来都不带答案，顺手就码了点收集到的博客问题的答案 共69道，2W字，耗时两天（疯狂暗示）欢迎催更吹水，来一个人就是一份催更动力点击并输入暗号：CSDN ...
全栈性能测试企业级实战
大互联网公司的系统平台更复杂，需要更多的角色通力协作完成任务。那是不是全栈工程师在大企业就没有存在的必要了呢？当然有必要。大企业需要从全局考虑来做顶层设计，对于做顶层设计的人来说知识面宽尤为重要。
停车系统源码-支持路内和路外停车、springcloud、vue、uniapp开发的商业源码
城市级静态交通管理平台是统筹整个城市静态交通管理工作的云端平台，是城市道路停车管理信息化建设的核心内容，深化信息化手段在城市道路停车查询、停车费用支付、停车泊位管理、停车巡管执法、信用管理等领域的建设...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章