js實(shí)現(xiàn)帶有介紹的Select列表菜單實(shí)例
本文實(shí)例講述了js實(shí)現(xiàn)帶有介紹的Select列表菜單。分享給大家供大家參考。具體如下:
帶有介紹的Select列表菜單特效代碼,并不是導(dǎo)航菜單,這是表單中常用的下拉列表菜單,里面定義的菜單名稱和鏈接都可以自己修改,不同的是添加了一個(gè)說明功能,鼠標(biāo)點(diǎn)擊列表中內(nèi)容的時(shí)候,會(huì)浮動(dòng)出本條內(nèi)容的介紹,另外文本框內(nèi)的內(nèi)容也會(huì)跟著改變。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-info-select-menu-codes/
具體代碼如下:
<html> <head> <title>帶有說明的導(dǎo)航欄</title> </head> <body> <script language="JavaScript"> <!-- function herfto(){ if (document.stationform.refsel.options[0].selected){ //根據(jù)用戶選定的項(xiàng)目 window.location.href = "http://www.dbjr.com.cn";} //改變本窗口的地址 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.;} //根據(jù)可選條目,這里應(yīng)該相應(yīng)的增減。 return true; } function textValue(){ var stationInteger, stationString stationInteger=document.stationform.refsel.selectedIndex //取得選定項(xiàng)目的編號(hào) stationString=document.stationform.refsel.options[stationInteger].title //根據(jù)編號(hào)取得相應(yīng)說明 document.stationform.stationtext.value = stationString } //將說明顯示出來 //--> </script> <form name="stationform"> <select name="refsel" onChange="textValue()" multiple size="5"> <option title="一個(gè)提供優(yōu)質(zhì)腳本代碼的網(wǎng)站">腳本之家 <option title="相當(dāng)不錯(cuò)的虛擬社區(qū)">新浪sina <option title="不用說,要搜索來這里就對了">搜狐 <option title="提供免費(fèi)個(gè)人主頁空間">網(wǎng)易163 <option title="一個(gè)優(yōu)秀的學(xué)生網(wǎng)站">世紀(jì)學(xué)苑 <option title="首創(chuàng)同學(xué)錄,中國學(xué)生的聚會(huì)場所">中國人 <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程序設(shè)計(jì)有所幫助。
相關(guān)文章
TypeScript之元組、數(shù)組及as?const的使用
TypeScript中的元組、數(shù)組和as?const關(guān)鍵字對于類型安全性和代碼可讀性非常重要,本文主要介紹了TypeScript之元組、數(shù)組及as?const的使用,感興趣的可以了解一下2023-10-10JS中數(shù)學(xué)計(jì)算精度問題的解決方案
這篇文章主要給大家介紹了JS中數(shù)學(xué)計(jì)算精度問題的解決方案,文中通過代碼示例和圖文結(jié)合給大家講解非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12深入理解JavaScript字節(jié)二進(jìn)制知識(shí)以及相關(guān)API
當(dāng)前,前端對二進(jìn)制數(shù)據(jù)有許多的API可以使用,這豐富了前端對文件數(shù)據(jù)的處理能力,有了這些能力,就能夠?qū)D片等文件的數(shù)據(jù)進(jìn)行各種處理。本文將著重介紹一些前端二進(jìn)制數(shù)據(jù)處理相關(guān)的API知識(shí),希望對大家有所幫助2023-02-02JavaScript面試必備之垃圾回收機(jī)制和內(nèi)存泄漏詳解
垃圾回收機(jī)制和內(nèi)存泄漏是JavaScript面試時(shí)常常問到的問題,這篇文章就為大家詳細(xì)整理了他們的相關(guān)知識(shí),感興趣的小伙伴可以跟隨小編一起了解一下2023-05-05javascript 刪除dom對象的事件函數(shù)代碼
本文為《JavaScript高級程序設(shè)計(jì)》第9章中的跨平臺(tái)事件中的部分內(nèi)容。2010-04-04JS實(shí)現(xiàn)簡單的天數(shù)計(jì)算器完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)簡單的天數(shù)計(jì)算器,結(jié)合完整實(shí)例形式分析了javascript針對日期的獲取及天數(shù)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-04-04獲取URL地址中的文件名和參數(shù)的javascript代碼
JS 獲取URL地址中的文件名和參數(shù),這個(gè)版本中有詳細(xì)的注釋。2009-09-09