select下拉選單跳轉效果程式碼

admin發表於2018-05-27

為了方便，不少的網站都有這樣的功能，當選中一個下拉專案的時候能夠實現跳轉功能，下面就是一個這樣的例項程式碼，喜歡或者有此方面需要的朋友可以參考一下，程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<script type="text/javascript"> 
window.onload=initForm;   
function initForm(){   
  document.getElementById("newLocation").selectIndex=0;   
  document.getElementById("newLocation").onchange=jumpPage;   
}   
function jumpPage(){   
  var newLoc=document.getElementById("newLocation");   
  var newPage=newLoc.options[newLoc.selectedIndex].value;   
  if(newPage!=""){   
    window.location=newPage;   
  }   
}   
</script>   
</head>   
<body>   
<form>   
  <select id="newLocation">   
    <option selected="selected" value="">螞蟻u幣羅</option>   
    <option value="http://www.softwhy.com">奮鬥才會成功</option>   
    <option value="http://www.softwhy.com">等待是沒有結果的</option>   
    <option value="http://www.softwhy.com">現在就執行</option>   
    <option value="http://www.softwhy.com">開始行動吧</option>    
  </select>    
</form>   
</body>   
</html>

以上程式碼實現了我們想要的功能，選中下拉項可以實現跳轉功能。

相關文章