js下拉框二级关联菜单效果代码具体实现

 更新时间:2013年08月03日 10:35:10   作者:  
这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下
复制代码 代码如下:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>双选择关联菜单</title>
</head>
<body>
<form name="doublecombo">
<p>
<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>特效代码</option>
<option>网页语言</option>
<option>软件教程</option>
</select>
<select name="stage2" size="1">
<option value="/texiao/shubiao">鼠标类</option>
<option value="/texiao/chuangkou">窗口类</option>
<option value="/texiao/daohang">导航类</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">
</p>
<script>
<!--
var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (I=0; I<groups; I++)
group[I]=new Array()
group[0][0]=new Option("鼠标类","/texiao/shubiao")
group[0][1]=new Option("窗口类","/texiao/chuangkou")
group[0][2]=new Option("导航类","/texiao/daohang")
group[1][0]=new Option("ASP","/yuyan/asp")
group[1][1]=new Option("PHP","/yuyan/php")
group[1][2]=new Option("JSP","/yuyan/jsp")
group[2][0]=new Option("Dreamweaver","/ruanjian/Dreamweaver")
group[2][1]=new Option("Fireworks","/ruanjian/Fireworks")
group[2][2]=new Option("Flash","/ruanjian/Flash")
group[2][3]=new Option("Photoshop","/ruanjian/Photoshop")
var temp=document.doublecombo.stage2
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (I=0;I<group[x].length;I++){
temp.options[I]=new Option(group[x][I].text,group[x][I].value)
}
temp.options[0].selected=true
}
function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>
</form>
</body>
</html></td>
 </tr>
</table>
 

相关文章

  • JS组件Bootstrap实现图片轮播效果

    JS组件Bootstrap实现图片轮播效果

    这篇文章主要为大家详细介绍了JS组件Bootstrap实现图片轮播效果的具体代码,对图片轮播效果感兴趣的小伙伴们可以参考一下
    2016-05-05
  • js实现菜单跳转效果

    js实现菜单跳转效果

    这篇文章主要为大家详细介绍了js实现菜单跳转效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • javascript设计模式 – 适配器模式原理与应用实例分析

    javascript设计模式 – 适配器模式原理与应用实例分析

    这篇文章主要介绍了javascript设计模式 – 适配器模式,结合实例形式分析了javascript适配器模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • 详解在HTTPS 项目中使用百度地图 API

    详解在HTTPS 项目中使用百度地图 API

    这篇文章主要介绍了在HTTPS 项目中使用百度地图 API,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • BootStrap3使用错误记录及解决办法

    BootStrap3使用错误记录及解决办法

    这篇文章主要介绍了BootStrap3使用错误记录及解决办法,需要的朋友可以参考下
    2016-12-12
  • 微信公众号H5支付接口调用方法

    微信公众号H5支付接口调用方法

    这篇文章主要介绍了微信公众号H5支付接口调用方法,微信内H5调用支付接口代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • javascript实现九宫格相加数值相等

    javascript实现九宫格相加数值相等

    这篇文章主要介绍了javascript实现九宫格相加数值相等的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 浅谈js数据类型判断与数组判断

    浅谈js数据类型判断与数组判断

    下面小编就为大家带来一篇浅谈js数据类型判断与数组判断。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • js 刷新页面的代码小结 推荐

    js 刷新页面的代码小结 推荐

    这里介绍的是网上比较流行的刷新页面的代码,整理的相对比较全了,这些知识都是前后台结合过程中,经常用的到的。
    2010-04-04
  • JavaScript多线程详解

    JavaScript多线程详解

    虽然有越来越多的网站在应用AJAX技术进行开发,但是构建一个复杂的AJAX应用仍然是一个难题。接下来小编给大家介绍JavaScript多线程,需要的朋友可以参考下
    2015-08-08

最新评论