免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 2721 | 回复: 2
打印 上一主题 下一主题

请教一个技术问题:如何使用html的下拉菜单中的选项控制其他元素 [复制链接]

论坛徽章:
0
跳转到指定楼层
1 [收藏(0)] [报告]
发表于 2009-06-27 16:12 |只看该作者 |倒序浏览
要实现的效果:在下拉菜单中有ABCD4个选项,选中A显示表格1,选B显示表格2,选C显示表格3。。。。
有熟悉的吗?
谢谢

论坛徽章:
0
2 [报告]
发表于 2009-06-30 19:59 |只看该作者
<html>
<body>
<script>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function setTab(name,cursel,n){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(i=1;i<=n;i++){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//var menu=document.getElementById(name+i);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var con=document.getElementById("con_"+name+"_"+i);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//menu.className=i==cursel?"hover":"";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;con.style.display=i==cursel?"block":"none";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(document.getElementById("paythree1").checked==true){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("dipselect").style.display="none";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(document.getElementById("paythree2").checked==true){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("dipselect").style.display="block";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
</script>
<form>

<input type="radio" name="abc" id="paythree1" onClick="setTab('paythree',1,2)">TEST1
<input type="radio" name="abc" id="paythree2" onClick="setTab('paythree',2,2)">TEST2


&nbsp;&nbsp;&nbsp;&nbsp;<div id="con_paythree_1">
&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="aaa">aaa
&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="aaa">bbb
&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="aaa">ccc
&nbsp;&nbsp;&nbsp;&nbsp;</div>
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;<div id="con_paythree_2" style="display:none">
&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="bbb" onClick="setTab('paydays',1,3)">ddd
&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="bbb" onClick="setTab('paydays',2,3)">fff
&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="bbb" onClick="setTab('paydays',3,3)">ggg
&nbsp;&nbsp;&nbsp;&nbsp;</div>
&nbsp;&nbsp;&nbsp;&nbsp;
<div id="dipselect">   
&nbsp;&nbsp;&nbsp;&nbsp;<div id="con_paydays_1"style="display:none">
&nbsp;&nbsp;&nbsp;&nbsp;请选择:<select name=select >
&nbsp;&nbsp;&nbsp;&nbsp;<option value="1" selected></option>
&nbsp;&nbsp;&nbsp;&nbsp;<option value="2" selected></option>
&nbsp;&nbsp;&nbsp;&nbsp;<option value="3" selected></option>
&nbsp;&nbsp;&nbsp;&nbsp;</select>
&nbsp;&nbsp;&nbsp;&nbsp;<br>
&nbsp;&nbsp;&nbsp;&nbsp;</div>
&nbsp;&nbsp;&nbsp;&nbsp;<div id="con_paydays_2"style="display:none">
&nbsp;&nbsp;&nbsp;&nbsp;请选择:<select name=select >
&nbsp;&nbsp;&nbsp;&nbsp;<option value="1" selected></option>
&nbsp;&nbsp;&nbsp;&nbsp;<option value="2" selected></option>
&nbsp;&nbsp;&nbsp;&nbsp;<option value="3" selected></option>
&nbsp;&nbsp;&nbsp;&nbsp;</select>
&nbsp;&nbsp;&nbsp;&nbsp;<br>
&nbsp;&nbsp;&nbsp;&nbsp;</div>
&nbsp;&nbsp;&nbsp;&nbsp;<div id="con_paydays_3"style="display:none">
&nbsp;&nbsp;&nbsp;&nbsp;请选择:<select name=select >
&nbsp;&nbsp;&nbsp;&nbsp;<option value="1" selected></option>
&nbsp;&nbsp;&nbsp;&nbsp;<option value="2" selected></option>
&nbsp;&nbsp;&nbsp;&nbsp;<option value="3" selected></option>
&nbsp;&nbsp;&nbsp;&nbsp;</select>
&nbsp;&nbsp;&nbsp;&nbsp;<br>
&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>
</form>
</body>
</html>

论坛徽章:
0
3 [报告]
发表于 2009-06-30 20:01 |只看该作者
凑合着看吧。不完全符合你的要求,不过原理相同。
前面有2个注释忘掉去了。没用的玩意。
加油!好运
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们:huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP