主页 / 网络编程 /

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

网络编程 2021-07-04 21:48www.168986.cn编程入门
这篇文章主要介绍了js实现带有介绍的Select列表菜单,涉及javascript页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

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

运行效果截图如下

在线演示地址如下

具体代码如下

<html>
<head>
<title>带有说明的导航栏</title>
</head>
<body>
<script language="JavaScript"> 
<!--
function herfto(){
  if (document.stationform.refsel.options[0].selected){ //根据用户选定的项目
    window.location.href = "https://.jb51.";} //改变本窗口的地址
  else if (document.stationform.refsel.options[1].selected)
  {  window.location.href = "http://.sina..";}
  else if (document.stationform.refsel.options[2].selected)    
  {  window.location.href = "http://.sohu.";} 
  else if (document.stationform.refsel.options[3].selected)    
  {  window.location.href = "http://.163.";} 
  else if (document.stationform.refsel.options[4].selected)    
  {  window.location.href = "http://.5dcentury.";} 
  else if (document.stationform.refsel.options[5].selected)    
  {  window.location.href = "http://.chinaren.";}  
  else if (document.stationform.refsel.options[6].selected)    
  {  window.location.href = "http://.yahoo.";} 
 //根据可选条目，这里应该相应的增减。
  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="一个提供优质脚本代码的网站">狼蚁SEO
<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垂直多级导航菜单代码分享

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by