JavaScript实现下拉框选择后自动跳转页面

作者:纸飞机时间:2026-10-29 12:07:15浏览:643

本文介绍如何使用JavaScript实现下拉框选项选中后自动跳转至指定页面的功能。通过监听select元素的onchange事件,获取选中项的value值,并利用window.location属性完成页面跳转,适用于导航菜单等场景。

下拉框自动跳转实现方案

本文介绍一种利用JavaScript实现下拉框选项选中后直接跳转页面的方法。具体实现方案如下:


<script type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
 if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<select name="dgLink2" id="dgLink2" style="WIDTH: 150px" onchange="MM_jumpMenu('parent',this,0)">
 <option value="#">---教学院系---</option>
 <option value="http://kletor.yangtzeu.edu.cn">油气资源与勘探技术教育部重点实验室</option>
 <option value="http://jjxy.yangtzeu.edu.cn">经济学院</option>
 <option value="http://zf.yangtzeu.edu.cn">政治与法律学院</option>
 <option value="http://tyxy.yangtzeu.edu.cn">体育学院</option>
 <option value="http://zhongwen.yangtzeu.edu.cn">文学院(荆楚文化研究中心)</option>
 <option value="http://yuwei.yangtzeu.edu.cn">文学院(语委、普通话测试站)</option>
 <option value="http://fl.yangtzeu.edu.cn">外国语学院</option>
 <option value="http://art.yangtzeu.edu.cn">艺术学院</option>
 <option value="http://shuxue.yangtzeu.edu.cn">信息与数学学院</option>
 <option value="http://psat.yangtzeu.edu.cn">物理科学与技术学院</option>
 <option value="http://chem.yangtzeu.edu.cn">化学与环境工程学院</option>
</select>

希望本文提供的代码示例对JavaScript开发者有所帮助。

作者最新文章