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. 面向对象程序设计_课堂作业_01_Circle

    The 1st classwork of the C++ program 题目: Create a program that asks for the radius of a circle and p ...

  2. 鼠标有但是U盘读取不出来怎么办

    我今天就遇到了这个问题,搞了半天最后下了一个驱动人生,查看里面的回答才解决 就是把里面通用串行总控制器设置为隐藏文件可读之后选择把灰色的都删除就好了.具体可以在驱动人生里搜U盘不识别,之后就4,5步即 ...

  3. VMWare虚拟机下为Ubuntu 12.04.1配置静态IP（NAT方式）

    背景 在虚拟机下运行操作系统,尤其是Linux系统已经是非常常见的做法.有时你想在虚拟机下搭建一个(模拟)服务器来供主机访问,比如搭建一个telnet/ssh.此时你会发现,每次启动虚拟机,VMWar ...

  4. 4199. [NOI2015]品酒大会【后缀数组+并查集】

    Description 一年一度的“幻影阁夏日品酒大会”隆重开幕了.大会包含品尝和趣味挑战两个环节,分别向优胜者颁发“首席品 酒家”和“首席猎手”两个奖项,吸引了众多品酒师参加.在大会的晚餐上,调酒师 ...

  5. HBase学习之路 （一）HBase基础介绍

    产生背景 自 1970 年以来,关系数据库用于数据存储和维护有关问题的解决方案.大数据的出现后, 好多公司实现处理大数据并从中受益,并开始选择像 Hadoop 的解决方案.Hadoop 使用分 布式文 ...

  6. 记一次ajax交互问题

    问题描述:仍然在表单中,像往常一样,异步获取表单内所有输入框的信息,点击提交,确实也走了后台,但是结果却走了ajax的error.这一点使我当时非常疑惑,为什么会走error呢? 一般走error的原 ...

  7. Java反射学习三

    反射与数组 java.lang.Array类提供了动态创建和访问数组元素的各种静态方法. 例程ArrayTester1类的main()方法创建了一个长度为10的字符串数组,接着把索引位置为5的元素设为 ...

  8. PAT乙级1033

    1033 旧键盘打字 (20 分)   旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及坏掉的那些键,打出的结果文字会是怎样? 输入格式: 输入在 2 ...

  9. 【FileZilla FTP Client】文件与服务器操作客户端

    跨平台的FTP,FTPS和SFTP客户端 可以断点续传进行上传.下载(需要服务器支持). 自定义命令. 可进行站点管理.

  10. linux文件系统初始化过程(1)---概述

    术语表: struct task:进程 struct mnt_namespace:命名空间 struct mount:挂载点 struct vfsmount:挂载项 struct file:文件 st ...