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 = ;

        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; 

Form,选择并转移导航菜单的更多相关文章

  1. WEB入门.九 导航菜单

    学习内容 水平导航菜单 垂直导航菜单 下拉式导航菜单 能力目标 制作tab标签导航菜单 制作带箭头的导航菜单 制作带信息提示的导航菜单 制作垂直下拉导航菜单 制作水平下拉导航菜单 本章简介 上一章节中 ...

  2. 前端框架bootstrap 表单和导航菜单的 Demo（第二篇）

    表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  3. bootstrap02导航菜单

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. web标准(复习)--4 纵向导航菜单及二级弹出菜单

    今天我们开始学习纵向导航菜单及二级弹出菜单,包含以下内容和知识点: 纵向列表 标签的默认样式 css派生选择器 css选择器的分组 纵向二级列表 相对定位和绝对定位 一.纵向列表纵向列表或称为纵向导航 ...

  5. jquery和css3实现滑动导航菜单

    效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...

  6. 仿腾讯QQ竖直滑动导航菜单

    菜单就像qq软件的分组,鼠标经过自动显示相应组的内容. 效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm 以下是源代码: <html> <he ...

  7. SharePoint 2013技巧分享系列 - 隐藏Blog和Apps左侧导航菜单

    企业内部网中,不需要员工创建Blog或者创建,安装SharePoint应用,因此需要在员工个人Web页面需要隐藏Blog或者Apps导航菜单, 其步骤设置如下: 该技巧适合SharePoint 201 ...

  8. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  9. SharePoint自动化系列——Site/Web/List级别的导航菜单

    转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 需求:在不同的测试用例中,对脚本中不确定的因素需要和用户交互来确定,比如选择哪个site,选择哪个 ...

随机推荐

  1. Linux 正则表达式详解

    正则表达式(REGULAR):为处理大量的字符串而定义的一套规则和方法,为了处理大量字符串而生 常见命令参数 基础正则表达式 . :有且只有任意一个字符(包括空格) * :重复前面任意0或者多个字符 ...

  2. 铁乐学Python_day12_作业

    1.写函数,返回一个扑克牌列表,里面有52项,每一项是一个元组 例如:[('红心',2),('草花',2), -('黑桃','A')] def poker(): suit = ['红心', '梅花', ...

  3. python常见释疑（有别于报错）（不定时更新）

    文:铁乐与猫 01.在cmd运行py脚本后,直接回到了提示符,没有任何输出,看起来像是并没有运行一样. 答:你的感觉很可能是对的,但脚本很可能己经正常运行,只是你的代码里面很可能没有给出print提示 ...

  4. 【Excel】坐下，VLOOKUP基本操作

    坐下,VLOOKUP基本操作   VLOOKUP如何使用我就不在这里详细介绍了,简单说一下好了.     如上图,第一个填写你要查找的值,第二个空选取你查找的范围,第三个空填你要得到第几列的值,最后选 ...

  5. mysql 注入基础知识

    (1)注入的分类---仁者见仁,智者见智. 下面这个是阿德玛表哥的一段话,个人认为分类已经是够全面了.理解不了跳过,当你完全看完整个学习过程后再回头看这段.能完全理解下面的这些每个分类,对每个分类有属 ...

  6. Java问题汇总（一） ----------2019/2/22

    第一次写,就弄弄简单样式

  7. PHP字符串——字符串函数

    比较字符串PHP有两个操作符和6个函数用于字符串间相互比较. 精确比较你可以用==和===操作符来比较两个字符串是否相等.这两个操作符的不同在于它们如何处理非字符串数据类型的操作数.==操作符把非字符 ...

  8. FreeMarker标签使用

    FreeMarker标签使用 模板技术在现代的软件开发中有着重要的地位,主要用于view层的展示,freemarker是比较流行的一种. 一.FreeMarker模板文件主要有4个部分组成 ①文本,直 ...

  9. Windows 7防火墙阻止了远程桌面连接的解决方法

    在[系统属性]中已经设置了允许远程桌面连接了,但是还是不能远程桌面的话,很可能是你的windows防火墙处于“启用”状态,防火墙阻止了windows 7系统的远程桌面连接.你可以使用以下的方法检查解决 ...

  10. 洛谷 P2045 方格取数加强版【费用流】

        题目链接:https://www.luogu.org/problemnew/show/P2045 题目描述 给出一个n*n的矩阵,每一格有一个非负整数Aij,(Aij <= 1000)现 ...