非常简单的二级联动js菜单 [收藏]

本文介绍了一个简单的二级联动菜单实现方案,通过JavaScript动态创建下拉菜单并根据用户选择更新子菜单选项,适用于网页导航等场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<TITLE>二级联动</TITLE>
<STYLE>
body { font-size: 11px; font-family: Verdana;background:#ececec;color:#666666;}
select { font-size: 11px; font-family: Verdana;vertical-align: middle;margin: 3px;background:#ececec;color:#666666;}
</STYLE>
<div id="tar"></div>
<SCRIPT LANGUAGE="JavaScript" DEFER>
var fMenu = ["上海","北京","广东","南京"]
var fValue = ["shanghai","beijing","guadong","nanjing"]
var sMenu = [["杨浦区","徐汇区","黄浦区","卢湾区"],["丰台区","宝定区"],["广州","深圳"],["雨花台"]]
var sValue = [["yp","xh","hp","lw"],["ft","bd"],["gz","sz"],["yht"]]

var oWhere = document.all.tar;
var ofMenu = document.createElement("<SELECT name='main'>");
var osMenu = document.createElement("<SELECT name='sub'>");
with(oWhere)appendChild(ofMenu),appendChild(osMenu);

createMainOptions();
createSubOptions(0);

ofMenu.onchange = function() {createSubOptions(this.selectedIndex);};

function createMainOptions() {
     for(var i=0;i<fMenu.length;i++)ofMenu.options[i] = new Option(fMenu[i],fValue[i]);
}
function createSubOptions(j) {
     with(osMenu) {
         length=0;
         for(var i=0;i<sMenu[j].length;i++)osMenu.options[i] = new Option(sMenu[j][i],sValue[j][i]);
     }
}
</SCRIPT>
<div style="background:#E7E3DE;text-align:right;font-family:'Arial';font-size:10px;margin-top:10px;"><a href="mailto:cloudchen@yeah.net">mailto:cloudchen</a></div><div style="background:#666666;color:white;font-family:'Arial';font-size:10px;">2003.8.19</div> 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值