选择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下拉菜单网页跳转就介绍到这了。