Select標簽加超鏈接的方法

知更鳥
知更鳥
知更鳥
1518
文章
6913
評論
2018年5月17日11:31:58來源:互聯網 5 2.2K
摘要

select 標簽可創建單選或多選菜單,很多時候需要實現鏈接跳轉,下面是三種實現方法

Select標簽加超鏈接的方法

select 標簽可創建單選或多選菜單,很多時候需要實現鏈接跳轉,下面是三種實現方法:

第一種方法:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>select加鏈接</title>
</head>
<body>
<SCRIPT language=javascript>
<!--
// open the related site windows
function mbar(sobj) {
var docurl =sobj.options[sobj.selectedIndex].value;
if (docurl != "") {
open(docurl,'_blank');
sobj.selectedIndex=0;
sobj.blur();
}
}
//-->
</SCRIPT>
<Select onchange=mbar(this) name="select">
<OPTION selected>=== 合作伙伴 ===</OPTION>
<OPTION value="http://www.baidu.com">百度</OPTION>
<OPTION value="http://www.163.com">網易</OPTION>
<OPTION value="http://www.flash8.net/">閃吧</OPTION>
</Select>
</body>
</html>

第二種方法:

<select name="pageselect" onchange="self.location.href=options[selectedIndex].value" >
<OPTION value="http://www.baidu.com">百度</OPTION>
<OPTION value="http://www.163.com">網易</OPTION>
</select>

第三種方法:帶跳轉按鈕

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select選擇-按鈕跳轉</title>
<script type="text/javascript">
function setsubmit()
{
if(mylink.value == 0)
window.location='http://www.baidu.com';
if(mylink.value == 1)
window.location='http://www.163.com';
if(mylink.value == 2)
window.location='http://www.sina.com';
}
</script>
</head>
<body>
<select name="mylink" id="mylink">
<OPTION value="0">百度</OPTION>
<OPTION value="1">網易</OPTION>
<OPTION value="2">新浪</OPTION>
</select>
<input type="button" id="btn" value="提交" onclick="setsubmit(this)" />
</body>
</html>

學點技術備用。

繼續閱讀
weinxin
關于本站
分享交流WordPress經驗與技巧,關注前端設計與網站制作。僅用于功能演示。
知更鳥
最佳 CSS 框架 Web前端

最佳 CSS 框架

在構建網站時,使用 CSS 框架是一個實時的節省,因為它為您提供了每個網頁設計師和前端開發人員在制作網站時需要的工具。 CSS 框架是一個軟件框架,它允許使用 HTML/CSS 進行更簡單、更符合標準...
line-height安卓中不垂直居中 Web前端

line-height安卓中不垂直居中

設計響應式網頁,PC端和移動端的樣式兼容性,很讓人撓頭,最常見的就是文字垂直不居中,而且蘋果手機和安卓手機下表現也不盡相同,往往蘋果手機是垂直居中的,但在安卓機上字卻靠上了,總是差那么一像素,應該是安...
jQuery幻燈片插件:OWL Carousel Web前端

jQuery幻燈片插件:OWL Carousel

Owl Carousel 是一個強大、實用但小巧的 jQuery 幻燈片插件,它具有以下特點: 兼容所有瀏覽器 支持響應式 支持 CSS3 過度 支持觸摸事件 支持 JSON 及自定義 JSON 格式...
js實時獲取瀏覽器窗口大小 Web前端

js實時獲取瀏覽器窗口大小

js實時獲取瀏覽器窗口大小,我們可以使用addEventListener()方法來實現。該addEventListener()方法可以注冊事件處理程序以偵聽瀏覽器窗口resize事件,例如window...
匿名

發表評論

匿名網友 填寫信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

評論:5   其中:訪客  5   博主  0
    • 龍笑天 龍笑天 5

      還是第二種夠簡單~ :grin:

      • 墨丶水瓶 墨丶水瓶 4

        哇 ,學習了 ,還有這種騷操作 …

        • 美容醫院 美容醫院 0

          學習了http://mr.51daifu.com/hospital/

          • ㄨ℉Nightmare i ㄨ℉Nightmare i 0

            很實用 ,不過我很好奇你這個輸入QQ自動引用是怎么做到的?

            • 網站建設 網站建設 4

              學習了,還能這么做 :wink: