select下拉菜单跳转效果代码

快乐打工仔 分类:实例代码

select下拉菜单跳转效果代码属于前端实例代码,有关更多实例代码大家可以查看

为了方便,不少的网站都有这样的功能,当选中一个下拉项目的时候能够实现跳转功能,下面就是一个这样的实例代码,喜欢或者有此方面需要的朋友可以参考一下,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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.pipipi.net">奋斗才会成功</option>   
    <option value="http://www.pipipi.net">等待是没有结果的</option>   
    <option value="http://www.pipipi.net">现在就执行</option>   
    <option value="http://www.pipipi.net">开始行动吧</option>    
  </select>    
</form>   
</body>   
</html>

以上代码实现了我们想要的功能,选中下拉项可以实现跳转功能。

select下拉菜单跳转效果代码,这样的场景在实际项目中还是用的比较多的,关于select下拉菜单跳转效果代码就介绍到这了。

回复

我来回复
  • 暂无回复内容