本文實例講述了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 = "http://www.survivalescaperooms.com";} //改變本窗口的地址 else if (document.stationform.refsel.options[1].selected) { window.location.;} else if (document.stationform.refsel.options[2].selected) { window.location.;} else if (document.stationform.refsel.options[3].selected) { window.location.;} else if (document.stationform.refsel.options[4].selected) { window.location.;} else if (document.stationform.refsel.options[5].selected) { window.location.;} else if (document.stationform.refsel.options[6].selected) { window.location.;} //根據可選條目，這里應該相應的增減。 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程序設計有所幫助。
新聞熱點
疑難解答
