用javascript 控制跳轉頁面

來源:互聯網
上載者:User

用javascript 控制<select>跳轉頁面 
先看:

圖S1是用標籤select 直接跳轉的,即在選項中選擇後直接跳轉,而圖S2是在選項中選擇後再點擊"提交"才進行跳轉.然後就是跳轉是當頁跳轉,還是用新頁面開啟,所以這裡就出現跳轉(或開啟)的四種情況了(如下表):

圖s1 圖s2
(a1)當頁,直接跳轉 (a2)當頁,提交後跳轉
(b1)新頁面,直接開啟 (b2)新頁面,提交後開啟

當面跳轉的核心代碼是:"location.href=value"

新頁面開啟的核心代碼是:"window.open()"

而還需注意的就是javasrcipt代碼的嵌入位置:(1)直接跳轉或開啟的javascript 代碼是嵌入在<select>中的,(2)提交後跳轉或新頁面開啟是嵌入到提交按鈕中的,並且按鈕不是用"submit",而是用"button",調用javascript 是用"onclick",而沒有在<form>中用"onsubmit"

下面分別是四種情況的代碼:

a1(當頁,直接跳轉):

 

<select name="qq" onchange="javascript:location.href=this.value;">
<option value="http://www.zol.com.cn" selected="selected" >zol</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>

b1(新頁面,直接開啟):
<select name="" onchange="javascript:window.open(this.options[this.selectedIndex].value)">
 <option value="http://www.zol.com.cn" selected="selected" >zol</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>

可以看到,直接跳轉或直接開啟,javascript 的代碼都不需要尋找標籤"select"的位置,不需引用form 或 select 的名字,只是通過"this"進行當前的指定.下次像這樣形式的"select",CTRL+C CRTL+V 就可以用了.

a2(當頁,提交後跳轉)
<form name="frm2" action="">
<select name="page2">
<option value="./date.html" selected="selected" >zol</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>

b2(新頁面,提交後開啟)
<form name="frm" action="">
<select name="page">
<option value="./date.html" selected="selected" >zol</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>

a2,b2跟a1,b1不同之處在於必須對form 和 select 進行命名,因為在javascript代碼中需要用到其名字進行指定行為的對象.用到其它地方時,需要對form select 的名字,及代碼中進行對應的修改(黃色的字型).

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.