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;