選擇select下拉選單網頁跳轉

螞蟻小編發表於2018-07-12
網頁

很多網站有這樣的效果，選擇不同的option項能夠實現不同網址的跳轉。

下面通過程式碼例項詳細介紹一下如何實現此效果。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=initForm;
function initForm(){
  var osel=document.getElementById("sel");
  osel.selectedIndex=0;
  osel.onchange=jumpPage;
}
function jumpPage(){
  var osel=document.getElementById("sel");
  var newURL=osel.options [osel.selectedIndex].value;
  if(newURL!=""){
    window.location.href=newURL;
  }
}
</script>
</head>
<body>
<select id="sel">
  <option selected>-選擇跳轉方向-</option>
  <option value="http://www.softwhy.com">螞蟻部落</option>
  <option value="http://www.163.com">網易</option>
  <option value="http://www.qq.com">騰訊</option>
</select>
</body>
</html>

上面的程式碼實現了我們的要求，選擇不同的選項可以實現跳轉效果，下面介紹一下它的實現過程。

一.程式碼註釋：

（1）.window.onload=initForm，為onload事件繫結處理函式。

（2）.function initForm(){}，onload事件處理函式。

（3）.var osel=document.getElementById("sel")，獲取select下拉選單物件。

（4）.osel.selectedIndex=0，設定第一個option為預設選中項。

（5）.osel.onchange=jumpPage，為select下拉選單註冊change事件處理函式，選擇不同的option項會觸發事件處理函式。

（6）.var osel=document.getElementById("sel")，獲取select下拉選單物件。

（7）.var newURL=osel.options [osel.selectedIndex].value，獲取選中項的value屬性值。

（8）.if(newURL!=""){window.location=newURL;}，選中不是第一個，就會實現相應的跳轉，否則不會跳轉。

二.相關閱讀:

（1）.selectedIndex屬性參閱JavaScript select.selectedIndex一章節。

（2）.onchange事件參閱JavaScript change事件一章節。

（3）.window.location.href參閱location.href一章節。

相關文章