您的位置：首页 > 其它

Form,选择并转移导航菜单

2016-05-07 14:23 417 查看

1、代码实例

<!DOCTYPE html>
<html>
<head>
<title>选择并转移导航菜单</title>
<meta charset="utf-8">
</head>
<body>
<form method="post" action="select.html">
<select id="newLocation">
<option selected>select a topic</option>
<option value="script01.html">javascript</option>
<option value="script02.html">jquery</option>
<option value="script03.html">jquery mobile</option>
<option value="script04.html">html5</option>
<option value="script05.html">css3</option>
</select>
</form>
</body>
</html>

<script type="text/javascript">
window.onload = init;
window.unload = function(){};
function init(){
document.getElementById("newLocation").selectedIndex = 0;
console.log(document.getElementById("newLocation").options);
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>

2、重点分析：

　　2.1、window.onunload = function(){}:

　　　　onunload 事件在用户退出页面时发生;

　　　　

　　2.2、selectedIndex:

selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。

注释：若允许多重选择，则仅会返回第一个被选选项的索引号。

　　2.3、options:

　　　　删除被选中的项
　　　　objSelect.options[objSelect.selectedIndex] = null;

　　　　增加项

　　　　objSelect.options[objSelect.length] = new Option("你好","hello");

　　　　修改所选择中的项
　　　　objSelect.options[objSelect.selectedIndex] = new
Option("你好","hello");

　　　　得到所选择项的文本

　　　　objSelect.options[objSelect.selectedIndex].text;

　　　　得到所选择项的值

　　　　objSelect.options[objSelect.selectedIndex].value;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航