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. 铁乐学python_day22_面向对象编程4

    以下内容大部分摘自博客http://www.cnblogs.com/Eva-J/ 封装 [封装]隐藏对象的属性和实现细节,仅对外提供公共访问方式. [好处] 将变化隔离: 便于使用: 提高复用性: 提 ...

  2. memcache知识梳理

    定义: memcache是一套分布式的高速缓存系统,由LiveJournal的Brad Fitzpatrick开发,但目前被许多网站使用以提升网站的访问速度,尤其对于一些大型的.需要频繁访问数据库的网 ...

  3. C# 算法题系列(一) 两数之和、无重复字符的最长子串

    题目一 原题链接 https://leetcode-cn.com/problems/two-sum/ 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整 ...

  4. 【openjudge】【递推】例3.6 过河卒(Noip2002)

    [题目描述] 棋盘上A点有一个过河卒,需要走到目标B点.卒行走的规则:可以向下.或者向右.同时在棋盘上的某一点有一个对方的马(如C点),该马所在的点和所有跳跃一步可达的点称为对方马的控制点,如图3-1 ...

  5. Hadoop学习之路（三）Hadoop-2.7.5在CentOS-6.7上的编译

    下载Hadoop源码 1.登录官网 2.确定你要安装的软件的版本 一个选取原则: 不新不旧的稳定版本 几个标准: 1)一般来说,刚刚发布的大版本都是有很多问题 2)应该选择某个大版本中的最后一个小版本 ...

  6. 8、Android---探究服务

    8.1.服务是什么 服务(Service)是Android中实现程序后台运行的解决方案 非常适合执行那些不需要和用户交互而且要求长期的任务 服务的运行不依赖于任何用户界面 即使程序被切换到后台 或者用 ...

  7. 横向滑动页面，导航条滑动居中的 js 实现思路

    最近在做新闻咨询页的项目,各个新闻频道通过横向滑动切换,顶部的导航active栏需要跟着切换到对应频道,并且active到达中部时,要一直处在中间. 类似效果就是uc浏览器<UC头条>的导 ...

  8. C语言程序设计I—第七周教学

    第七周教学总结(14/10-20/10) 教学内容 第二章 用C语言编写程序 2.5 生成乘方表和阶乘表 课前准备 在蓝墨云班课发布资源: PTA:2018秋第七周作业 分享码:FE065DC5D8C ...

  9. 1555: Inversion Sequence （通过逆序数复原序列 vector的骚操作！！！）

    1555: Inversion Sequence Submit Page    Summary    Time Limit: 2 Sec     Memory Limit: 256 Mb     Su ...

  10. vue watch关于对象内的属性监听

    vue可以通过watch监听data内数据的变化.通常写法是: data: { a: 100 }, watch: { a(newval, oldVal) { // 做点什么... console.lo ...