JS中创建选择并进行跳转

来源：互联网发布：gameboy知乎编辑：程序博客网时间：2024/04/30 00:36

最近在看关于JavaScript的书籍时，发现一个有意思的知识点，那就是关于Web中的导航菜单，可以选择菜单中的某个选项，然后通过submit按钮进入到表单提交成功的界面。但是目前在JavaScript中存在一个新的方法，可以通过选择项直接跳转到对应的界面，这样在我们的界面中就无须使用跳转按钮，可以使得用户觉得站点更干净利落，并且简单方便。下面我就来介绍一下这种实现的方法

①首先创建一个简单的项目文件夹，文件目录如下：

②然后在各个文件夹中创建相应的文件，主界面的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
下拉框选择跳转
</title>
<script type="text/javascript" src="../js/selectForm001.js"></script>
<link rel="stylesheet" type="text/css" href="../css/selectForm.css">
</head>
<body>
表单提交：
<form action="sLogin.html" align="left">
<select id="newLocation" class="selectClass">
<option selected>---请选择---</option>
<option value="select01.html">选择一</option>
<option value="select02.html">选择二</option>
<option value="select03.html">选择三</option>
<option value="select04.html">选择四</option>
</select>
<input type="submit" value="提交" />

</form>
</body>
</html>

③JS代码如下：

//加载整个页面
window.onload = initform;
//防止有些浏览器后退时无法触发onclick事件
window.onunload = function(){};

function initform(){

//首先默认选择默认值
document.getElementById("newLocation").selected = 0;
//调用跳转页面的方法
document.getElementById("newLocation").onchange = jumpPage;
}

//jumpPage函数的编写
function jumpPage(){

//获得资源元素
var newLoc = document.getElementById("newLocation");
var newPage = newLoc.options[newLoc.selectedIndex].value;

//判断跳转的页面是否为空
if(newPage!=""){
window.location = newPage;
}
}

效果图： ①主界面

②当点击下拉框中的某个值(无须点击提交)可以跳转到固定界面中

0 0