选择select下拉菜单网页跳转

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

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

很多网站有这样的效果,选择不同的option项能够实现不同网址的跳转。

下面通过代码实例详细介绍一下如何实现此效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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.pipipi.net">犀牛前端部落</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一章节。

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

回复

我来回复
  • 暂无回复内容