js实现带有介绍的Select列表菜单实例
2015-08-18 16:28
671 查看
带有介绍的Select列表菜单特效代码,并不是导航菜单,这是表单中常用的下拉列表菜单,里面定义的菜单名称和链接都可以自己修改,不同的是添加了一个说明功能,鼠标点击列表中内容的时候,会浮动出本条内容的介绍,另外文本框内的内容也会跟着改变。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-info-select-menu-codes/
具体代码如下:
<html> <head> <title>带有说明的导航栏</title> </head> <body> <script language="JavaScript"> <!-- function herfto(){ if (document.stationform.refsel.options[0].selected){ //根据用户选定的项目 window.location.href = "//www.jb51.net";} //改变本窗口的地址 else if (document.stationform.refsel.options[1].selected) { window.location.href = "http://www.sina.com.cn";} else if (document.stationform.refsel.options[2].selected) { window.location.href = "http://www.sohu.com";} else if (document.stationform.refsel.options[3].selected) { window.location.href = "http://www.163.com";} else if (document.stationform.refsel.options[4].selected) { window.location.href = "http://www.5dcentury.com";} else if (document.stationform.refsel.options[5].selected) { window.location.href = "http://www.chinaren.com";} else if (document.stationform.refsel.options[6].selected) { window.location.href = "http://cn.yahoo.com";} //根据可选条目,这里应该相应的增减。 return true; } function textValue(){ var stationInteger, stationString stationInteger=document.stationform.refsel.selectedIndex //取得选定项目的编号 stationString=document.stationform.refsel.options[stationInteger].title //根据编号取得相应说明 document.stationform.stationtext.value = stationString } //将说明显示出来 //--> </script> <form name="stationform"> <select name="refsel" onChange="textValue()" multiple size="5"> <option title="一个提供优质脚本代码的网站">脚本之家 <option title="相当不错的虚拟社区">新浪sina <option title="不用说,要搜索来这里就对了">搜狐 <option title="提供免费个人主页空间">网易163 <option title="一个优秀的学生网站">世纪学苑 <option title="首创同学录,中国学生的聚会场所">中国人 <option title="世界闻名的搜索巨头">雅虎yahoo </select> <p> <input type="button" name="stationbutton" value="Go!" onClick="herfto()" style="background-color: #FFFFFF; border: 1 solid #000000"> <p><input type="text" name="stationtext" value="" size="30" maxlength="35" style="border: 1 solid #000000"> </form> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- Extjs4.0 最新最全视频教程
- 底部Popwindow形式菜单的类的封装
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- 一步一步跟我学易语言之第二个易程序菜单设计
- IE右键菜单被修改
- 访问控制列表概述
- jQuery菜单插件用法实例
- 路由器访问列表的应用
- js可突破windows弹退效果代码
- JSP脚本漏洞面面观
- ASP动态级联菜单实现代码
- VBS CHR码值对应列表
- 使用BAT一句话命令实现快速合并JS、CSS
- Lua编程示例(一):select、debug、可变参数、table操作、error
- js显示当前星期的起止日期的脚本
- Perl中的列表和数组学习笔记
- SQL学习笔记三 select语句的各种形式小结
- 一条select语句引起的瓶颈问题思考
- SQL Select语句完整的执行顺序