js实现带有介绍的Select列表菜单实例
作者：企鹅 时间：2024-04-19 10:26:22
本文实例讲述了js实现带有介绍的Select列表菜单。分享给大家供大家参考。具体如下：
带有介绍的Select列表菜单特效代码，并不是导航菜单，这是表单中常用的下拉列表菜单，里面定义的菜单名称和链接都可以自己修改，不同的是添加了一个说明功能，鼠标点击列表中内容的时候，会浮动出本条内容的介绍，另外文本框内的内容也会跟着改变。
运行效果截图如下：
在线演示地址如下：
http://demo.aspxhome.com/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 = "https://www.aspxhome.com";} //改变本窗口的地址
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程序设计有所帮助。
标签：js,Select,列表,菜单
0
投稿猜你喜欢
OpenCV+python实现实时目标检测功能
2023-11-03 01:59:35
Golang学习笔记之安装Go1.15版本(win/linux/macos/docker安装)
2024-05-13 10:41:23
在 Windows 下搭建高效的 django 开发环境的详细教程
2023-08-31 06:14:12
Python3.8安装Pygame教程步骤详解
2022-05-11 15:26:15
IE6下图片下方有空隙的解决方法
2008-08-01 18:02:00
VS2015安装之后加装Sql server2014详细步骤
2024-01-18 04:39:56
vue项目中全局引入1个.scss文件的问题解决
2024-05-29 22:44:38
ORACLE中段的HEADER_BLOCK示例详析
2024-01-26 02:35:09
部署Django到阿里云服务器教程示例
2022-03-28 23:46:19
详解Python传入参数的几种方法
2023-02-05 15:37:28
对python实现二维函数高次拟合的示例详解
2021-06-30 11:24:06
python3利用tcp实现文件夹远程传输
2023-09-03 07:44:38
numpy中索引和切片详解
2022-06-07 16:19:05
基于K.image_data_format() == 'channels_first' 的理解
2022-08-01 08:12:45
Python 连连看连接算法
2023-10-28 09:12:35
PHP addslashes()函数讲解
2023-06-04 04:28:24
段正淳的css笔记(4)css代码的简写
2007-11-01 22:03:00
mysql 数据库备份的多种实现方式总结
2024-01-18 23:03:25
ASP程序中调用函数Now()显示上午下午的问题
2009-08-27 13:09:00
python实现实时监控文件的方法
2021-08-18 21:17:06