我们使用表单下拉列表选择数据，如省、市、县、年、月等数据，我们即可使用下拉菜单表单进行设置。
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. Linux Debugging（四）: 使用GDB来理解C++ 对象的内存布局（多重继承，虚继承）

    前一段时间再次拜读<Inside the C++ Object Model> 深入探索C++对象模型,有了进一步的理解,因此我也写了四篇博文算是读书笔记: Program Transfor ...

  2. 【一天一道LeetCode】#80. Remove Duplicates from Sorted Array II

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Follow ...

  3. 幂次法则power law

    幂次法则分布和高斯分布是两种广泛存在的数学分布.可以预测和统计相关数据. pig中用其处理数据倾斜,实现负载均衡. 个体的规模和其名次之间存在着幂次方的反比关系,R(x)=ax(-b次方) 其中,x为 ...

  4. 【测试】Gunicorn , uWSGI同步异步测试以及应用场景总结

    最近使用uwsgi出了一些问题,于是测试下Gunicorn测试对比下 环境 一颗cpu 1g内存 Centos系统 Django作为后端应用,Gunicorn默认模式和异步模式,响应基本是无阻塞类型 ...

  5. Java学习笔记（一）网格袋布局

    网格袋布局类似于Win8的Metro布局,用于将组件按大小比例放在不同位置的网格内,各组件的实际大小会随着窗口的改变而改变,但相对位置不变,能够很好的适应屏幕. 通过阅读<21天学通Java&g ...

  6. (转载)SQL Server2008附加数据库之后显示为只读时解决方法

    SQL Server2008附加数据库之后显示为只读时解决方法 啰嗦的话就不多说了,直入主题吧! 方案一: 碰到这中情况一般是使用的sa账户登录的,只要改为Windows身份验证,再附加数据库即可搞定 ...

  7. /dev/null 2>&1的意思（可以直接参考shell重定向那篇，/dev/null是空设备）

    路还长 别太狂 以后指不定谁辉煌 2>&1 和 &> 的解释 Linux的IO输入输出有三类 Standard Input 代码 0 Standard Output 代码 ...

  8. Linux下xargs命令详解

    http://www.cnblogs.com/perfy/archive/2012/07/24/2606101.html xargs是给命令传递参数的一个过滤器,也是组合多个命令的一个工具.它把一个数 ...

  9. Android编译系统中的Kconfig，Makefile,.config编译系统浅析

    在对Android进行编译时,用的就是Linux下的Makefile和Kconfig编译系统,对整个系统进行编译.当然还包括很多配置命令,比如make defconfig, make oldconfi ...

  10. SpriteBuilder切换解决方案以及CCB的修改与保存

    在SpriteBuilder中切换解决方案非常简单,可以按cmd+数字键即可. 如上图可以看到数字键1,2,3分别对应于3中不同的解决方案. 注意:当通过在CCB中包含一个Sub File Node的 ...