我们使用表单下拉列表选择数据，如省、市、县、年、月等数据，我们即可使用下拉菜单表单进行设置。
select 我下拉列表菜单标签
Option为下拉列表数据标签
Value 为Option的数据值（用于数据的传值）

select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。

<select>标签的使用技巧总结：

 

1、动态创建select
function createSelect () {

    var mySelect = document.createElement("select");

    mySelect.id = "mySelect";

    docuemnt.body.appendChild(mySelect);

}
2、添加一个选项

function addOption () {

   var obj = document.getElementById("mySelect");

    obj.add(new  Option("文本", "值"))

}

3、删除所有的option

obj.options.length = 0;

4、获取选中的索引

var index  = obj.selectedIndex;

删除 obj.options.remove(index);

获取value值：obj.options[index].value;

获取文本的值： obj.options[index].text;

5、删除select

var mySelect = document.getElementById("mySelect");

mySelect.parentNode.removeChild(mySelect);

6、让html里面的select无法选择？

放一个option或者给option加上 disable = "disabled";

7、给html select 标签加链接的方法：

a、

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>select加链接</title>

</head>

<body>

<script type="text/javascript">

  function mbar(sobj) {

     var docurl = sobj.options[sobj.selectedIndex].value;

     if (docurl !='') {

        open(docurl, '_blank');

        sobj.selectedIndex = 0;

        sobj.blur();//失去焦点

     }

  }

</script>

<select name="change_select" id="change_select" onchange=mbar(this)>

        <option value="http://www.root.com/test/exercise/s1.html">我的本地项目</option>

        <option value="https://www.baidu.com/?tn=47018152_dg">百度</option>

        <option value="http://www.imooc.com/u/1891279">慕课网课程</option>

        <option value="http://fanyi.baidu.com/#en/zh/restore">翻译</option>

</select>

</body>

</html>

第二种：

<select name="change_select" id="change_select" onchange="self.location.href=options[selectedIndex].value">

        <option value="http://www.root.com/test/exercise/s1.html">我的本地项目</option>

        <option value="https://www.baidu.com/?tn=47018152_dg">百度</option>

        <option value="http://www.imooc.com/u/1891279">慕课网课程</option>

        <option value="http://fanyi.baidu.com/#en/zh/restore">翻译</option>

</select>

第三种：

<select name="change_select" id="change_select" onchange=mbar(this)>

        <option value="1">百度</option>

        <option value="2">慕课网课程</option>

        <option value="3">翻译</option>

</select>

<input  type="button" id= "btn" value="提交" oonclick="submit(this)"   />

js:

<script type="text/javascript">

 function submit () {

   if(mylink.value == 0)

      window.location='http://www.baidu.com';

   if(mylink.value == 1)

      window.location='http://www.w3cschool.cn';

   if(mylink.value == 2)

      window.location='http://www.youj.com';

 }

</script>

其中最要的是获取给select下拉列表元素绑定一个change()事件，就是当这个元素的值发生改变的时候会触发此方法,

然后还有一个就是获取当前选中的option索引： var index  = selectObj.selectedIndex;

var value  = selectObj.options[index].value;

var text    = selectObj.options[index].text;

其他知识点：

Location对象：

Location对象是Window对象的一个部分，可通过window.location属性来访问。

location.reload()刷新当前文档

location.href  设置或返回完整的 URL。

top：

该变更永远指分割窗口最高层次的浏览器窗口。如果计划从分割窗口的最高层次开始执行命令，就可以用top变量。

parent：

该变量指的是包含当前分割窗口的父窗口。如果在一个窗口内有分割窗口，而在其中一个分割窗口中又包含着分割窗口，则第2层的分割窗口可以用parent变量引用包含它的父分割窗口。

opener：

指用WINDOW.OPEN等方式创建的新窗口对应的原窗口。

附：Window对象、Parent对象、Frame对象、Document对象和Form对象的阶层关系：Windwo对象→Parent对象→Frame对象→Document对象→Form对象，

　　

详细的<select>下拉列表详解的更多相关文章

  1. mysql基础篇 - SELECT 语句详解

    基础篇 - SELECT 语句详解         SELECT语句详解 一.实验简介 SQL 中最常用的 SELECT 语句,用来在表中选取数据,本节实验中将通过一系列的动手操作详细学习 SELEC ...

  2. linux select函数详解

    linux select函数详解 在Linux中,我们可以使用select函数实现I/O端口的复用,传递给 select函数的参数会告诉内核: •我们所关心的文件描述符 •对每个描述符,我们所关心的状 ...

  3. lucene、lucene.NET详细使用与优化详解

    lucene.lucene.NET详细使用与优化详解 2010-02-01 13:51:11 分类: Linux 1 lucene简介1.1 什么是luceneLucene是一个全文搜索框架,而不是应 ...

  4. Git学习系列之Windows上安装Git详细步骤（图文详解）

    前言 最初,Git是用于Linux下的内核代码管理.因为其非常好用,目前,已经被成功移植到Mac和Windows操作系统下. 鉴于大部分使用者使用的是Windows操作系统,故,这里详细讲解Windo ...

  5. npm安装vue详细教程（图片详解）

    npm安装vue详细教程(图片详解) 一.总结 一句话总结:整个安装流程照着教程来,注意系统环境变量的配置,注意一下npm的本地仓库和缓存位置 教程 系统环境变量 仓库 缓存 1.什么情况下最适合用n ...

  6. [转载，感觉写的非常详细]DUBBO配置方式详解

    [转载,感觉写的非常详细]DUBBO配置方式详解 原文链接:http://www.cnblogs.com/chanshuyi/p/5144288.html DUBBO 是一个分布式服务框架,致力于提供 ...

  7. MySQL之SELECT 语句详解

    本文参考实验楼的SELECT 语句详解结合自己操作部分而写成. 注意:大多数系统中,SQL语句都是不区分大小写的,但是出于严谨和便于区分保留字和变量名,在书写的时,保留字应大写,而变量名应小写.所谓的 ...

  8. lucene.NET详细使用与优化详解

    lucene.NET详细使用与优化详解 http://www.cnblogs.com/qq4004229/archive/2010/05/21/1741025.html http://www.shan ...

  9. 28、vSocket模型详解及select应用详解

    在上片文章已经讲过了TCP协议的基本结构和构成并举例,也粗略的讲过了SOCKET,但是讲解的并不完善,这里详细讲解下关于SOCKET的编程的I/O复用函数. 1.I/O复用:selec函数 在介绍so ...

随机推荐

  1. Chapter 3 Protecting the Data（1）：理解权限

    原文出处:http://blog.csdn.net/dba_huangzj/article/details/39548665,专题目录:http://blog.csdn.net/dba_huangzj ...

  2. Linux的文件系统及其硬盘分区挂载原理

    如果您是一位新手,也许 您还不知道如何把文件从Windows拷贝到Linux上吧?下面,我们将说明Unix文件系统以及mount的工作过程,然后再比较详细地讨论. mount的使用和有关选项.如果您已 ...

  3. (NO.00003)iOS游戏简单的机器人投射游戏成形记(十四)

    我们首先必须将Level中所有机器人保存在某个数组里,因为该数组会在不同地方被访问,我们将其放在LevelRestrict类中,按道理应该放到GameState类中,这里从简. 打开LevelRest ...

  4. 【shell脚本练习】grep sed awk

    下面是简单学习之后做得练习题,如果有不对的或者说解题思路不好的,请交流啊. Grep 练习 文件名grepfile Steve Blenheim:238-923-7366:95 Latham Lane ...

  5. 认证模式之Form模式

    上面介绍的两种模式都属于HTTP协议规范范畴,由于它的规范使得很多东西无法自定义,例如登录窗口.错误展示页面.所以需要另外一种模式提供更加灵活的认证,也就是基于Form的认证模式. Form模式的认证 ...

  6. PorterDuffXferMode不正确的真正原因PorterDuffXferMode深入试验)

    菜鸡wing遇敌PorterDuffXferMode,不料过于轻敌,应战吃力.随后与其大战三天三夜,三百余回合不分胜负.幸得 @咪咪控 相助,侥幸获胜. 关键字:PorterDuffXferMode ...

  7. OC语言（五）

    三十七.SEL类型-方法的包装 发送消息其实就是发送SEL. 每个方法都有与之对应的SEL类型数据. 第一次调用方法,先把方法包装成为SEL数据,再根据SEL去找方法地址,最后根据方法地址调用相应的方 ...

  8. centos下安装mysql（安装，启动，停止，服务端口查询，用户密码设定）

    http://www.2cto.com/database/201305/208114.html http://smilemonkey.iteye.com/blog/673848 netstat -na ...

  9. MTK GPIO 一些理解

    基于6575平台: GPIO驱动程序提供了两个接口: (1)内核空间:所提供的GPIO驱动程序,驱动程序可以调用其他函数 (2)用户空间:用户空间的程序可以通过发送IOCTL   /dev/ mtgp ...

  10. 苹果新的编程语言 Swift 语言进阶（八）－－属性

    属性是特定类.结构或枚举的相关值,属性根据作用域不同分为实例属性与类型属性,还可以根据是否存储分为存储属性和计算属性. 1.1 实例属性 为一个类.结构或枚举定义的属性默认属于实例属性,即该属性属于为 ...