快捷導(dǎo)航

JavaScript實(shí)現(xiàn)通過select標(biāo)簽跳轉(zhuǎn)網(wǎng)頁(yè)的方法

更新時(shí)間：2016年09月29日 12:00:44 作者：山貓的博客

這篇文章主要介紹了JavaScript實(shí)現(xiàn)通過select標(biāo)簽跳轉(zhuǎn)網(wǎng)頁(yè)的方法,涉及javascript事件響應(yīng)及窗口操作相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)通過select標(biāo)簽跳轉(zhuǎn)網(wǎng)頁(yè)的方法。分享給大家供大家參考，具體如下：

我們經(jīng)常有遇到需要用select標(biāo)簽跳轉(zhuǎn)到新網(wǎng)頁(yè)的情況，dw生成的代碼太復(fù)雜，那么有沒有精簡(jiǎn)的代碼得以實(shí)現(xiàn)呢？經(jīng)過仔細(xì)的研究找到了以下幾段代碼，非常不錯(cuò)。

話不多說，直奔主題。

當(dāng)面跳轉(zhuǎn)的核心代碼是："location.href=value"
新頁(yè)面打開的核心代碼是："window.open()"

代碼分四類：

1、當(dāng)前頁(yè)面直接跳轉(zhuǎn)：

<select name="" onchange="javascript:location.href=this.value;">
<option value="http://m.fzitv.net" 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://m.fzitv.net" 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://m.fzitv.net" 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://m.fzitv.net" 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>

以上是四種常見的跳轉(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è)也是非常好的。

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: