Form,选择并转移导航菜单

2016-05-07 14:23 流浪的诗人阅读(383) 评论(0) 编辑收藏举报

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;