JavaScript實(shí)現(xiàn)通過(guò)select標(biāo)簽跳轉(zhuǎn)網(wǎng)頁(yè)的方法
本文實(shí)例講述了JavaScript實(shí)現(xiàn)通過(guò)select標(biāo)簽跳轉(zhuǎn)網(wǎng)頁(yè)的方法。分享給大家供大家參考,具體如下:
我們經(jīng)常有遇到需要用select標(biāo)簽跳轉(zhuǎn)到新網(wǎng)頁(yè)的情況,dw生成的代碼太復(fù)雜,那么有沒(méi)有精簡(jiǎn)的代碼得以實(shí)現(xiàn)呢?經(jīng)過(guò)仔細(xì)的研究找到了以下幾段代碼,非常不錯(cuò)。
話不多說(shuō),直奔主題。
當(dāng)面跳轉(zhuǎn)的核心代碼是:"location.href=value"
新頁(yè)面打開(kāi)的核心代碼是:"window.open()"
代碼分四類(lèi):
1、當(dāng)前頁(yè)面直接跳轉(zhuǎn):
<select name="" onchange="javascript:location.href=this.value;"> <option value="http://www.dbjr.com.cn" selected="selected" >jb51</option> <option value="http://www.163.com" >163</option> <option value="http://www.sina.com" >sina</option> <option value="http://www.sohu.com" >sohu</option> </select>
2、新頁(yè)面彈出跳轉(zhuǎn):
<select name="" onchange="javascript:window.open(this.options[this.selectedIndex].value)"> <option value="http://www.dbjr.com.cn" selected="selected" >jb51</option> <option value="http://www.163.com" >163</option> <option value="http://www.sina.com" >sina</option> <option value="http://www.sohu.com" >sohu</option> </select>
3、當(dāng)前頁(yè)面點(diǎn)擊按鈕跳轉(zhuǎn):
<form name="frm2" action=""> <select name="page2"> <option value="http://www.dbjr.com.cn" selected="selected" >jb51</option> <option value="http://www.163.com" >163</option> <option value="http://www.sina.com" >sina</option> <option value="http://www.sohu.com" >sohu</option> </select> <input type="button" value="提交" onclick="javascript:location.href=document.frm2.page2.options[document.frm2.page2.selectedIndex].value;"/> </form>
4、新頁(yè)面點(diǎn)擊按鈕跳轉(zhuǎn):
<form name="frm" action=""> <select name="page"> <option value="http://www.dbjr.com.cn" selected="selected" >jb51</option> <option value="http://www.163.com" >163</option> <option value="http://www.sina.com" >sina</option> <option value="http://www.sohu.com" >sohu</option> </select> <input type="button" value="提交" onclick="javascript:window.open(document.frm.page.options[document.frm.page.selectedIndex].value)"/> </form>
以上是四種常見(jiàn)的跳轉(zhuǎn)方法。
另外還有一種當(dāng)前頁(yè)面跳轉(zhuǎn)的代碼也比較簡(jiǎn)潔:
<select name="" onchange="self.location.href=options[selectedIndex].value" > <option value="http://www.baidu.com">百度</option> <option value="http://www.163.com">網(wǎng)易</option> </select>
這個(gè)也是非常好的。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《JavaScript窗口操作與技巧匯總》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- asp.net(c#)網(wǎng)頁(yè)跳轉(zhuǎn)七種方法小結(jié)
- javascript 網(wǎng)頁(yè)跳轉(zhuǎn)的方法
- 網(wǎng)頁(yè)自動(dòng)跳轉(zhuǎn)代碼收集
- Jquery實(shí)現(xiàn)網(wǎng)頁(yè)跳轉(zhuǎn)或用命令打開(kāi)指定網(wǎng)頁(yè)的解決方法
- 實(shí)現(xiàn)網(wǎng)頁(yè)頁(yè)面跳轉(zhuǎn)的幾種方法(meta標(biāo)簽、js實(shí)現(xiàn)、php實(shí)現(xiàn))
- javascript實(shí)現(xiàn)倒計(jì)時(shí)N秒后網(wǎng)頁(yè)自動(dòng)跳轉(zhuǎn)代碼
- 讓網(wǎng)頁(yè)跳轉(zhuǎn)到指定位置的jquery代碼非書(shū)簽
- 基于JS實(shí)現(xiàn)移動(dòng)端訪問(wèn)PC端頁(yè)面時(shí)跳轉(zhuǎn)到對(duì)應(yīng)的移動(dòng)端網(wǎng)頁(yè)
- JS實(shí)現(xiàn)點(diǎn)擊網(wǎng)頁(yè)判斷是否安裝app并打開(kāi)否則跳轉(zhuǎn)app store
- jQuery如何跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè) 就這么簡(jiǎn)單
相關(guān)文章
微信小程序js時(shí)間戳與日期格式的轉(zhuǎn)換方法
這篇文章主要給大家介紹了關(guān)于微信小程序js時(shí)間戳與日期格式的轉(zhuǎn)換方法,在小程序中使用時(shí)間選擇器時(shí),獲取到的時(shí)間可能是一個(gè)時(shí)間戳,這并不是我們想要的,這時(shí)候我們得將獲取到的時(shí)間戳進(jìn)行轉(zhuǎn)換,需要的朋友可以參考下2023-10-10JavaScript中forEach和map詳細(xì)講解
foreach和map都是JavaScript中數(shù)組的常用方法,它們都可以對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)函數(shù),但是它們有一些區(qū)別,下面這篇文章主要給大家介紹了關(guān)于JavaScript中forEach和map詳細(xì)講解的相關(guān)資料,需要的朋友可以參考下2023-11-11JavaScript實(shí)現(xiàn)圖片DIV豎向滑動(dòng)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片DIV豎向滑動(dòng)的方法,涉及javascript操作div層的相關(guān)技巧,需要的朋友可以參考下2015-04-04通過(guò)JS來(lái)判斷頁(yè)面控件是否獲取焦點(diǎn)
本篇文章主要介紹了通過(guò)JS來(lái)判斷頁(yè)面控件是否獲取焦點(diǎn)的方法。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01淺談js圖片前端預(yù)覽之filereader和window.URL.createObjectURL
下面小編就為大家?guī)?lái)一篇淺談js圖片前端預(yù)覽之filereader和window.URL.createObjectURL。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06百度坐標(biāo)(BD09)、國(guó)測(cè)局坐標(biāo)(火星坐標(biāo),GCJ02)、和WGS84坐標(biāo)系之間的轉(zhuǎn)換
這篇文章主要介紹了百度坐標(biāo)(BD09)、國(guó)測(cè)局坐標(biāo)(火星坐標(biāo),GCJ02)、和WGS84坐標(biāo)系之間的轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2016-02-02