js实现带有介绍的Select列表菜单实例

2019-11-20 11:48:15

字体：大中小

来源：转载

供稿：网友

本文实例讲述了js实现带有介绍的Select列表菜单。分享给大家供大家参考。具体如下：

带有介绍的Select列表菜单特效代码，并不是导航菜单，这是表单中常用的下拉列表菜单，里面定义的菜单名称和链接都可以自己修改，不同的是添加了一个说明功能，鼠标点击列表中内容的时候，会浮动出本条内容的介绍，另外文本框内的内容也会跟着改变。

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.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 = "//www.VeVB.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程序设计有所帮助。

上一篇：DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

下一篇：jQuery垂直多级导航菜单代码分享