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

前端技术 2023/09/05 JavaScript

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.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 = \"http://www.phpstudy.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=\"一个提供优质脚本代码的网站\">phpstudy
<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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/13973

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案