我们使用表单下拉列表选择数据，如省、市、县、年、月等数据，我们即可使用下拉菜单表单进行设置。
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. iOS中 数据持久化 UI高级_17

    数据持久化的本质就是把数据由内写到本地(硬盘中),在iOS指将数据写到沙盒文件夹下: 沙盒机制:指的就是采用沙盒文件夹的形式管理应用程序的本地文件,而且沙盒文件夹的名字是随机分配的,采用十六进制方法命 ...

  2. awk 循环语句例子

    awk 循环语句例子 运行结果:

  3. Socket层实现系列 — I/O事件及其处理函数

    主要内容:Socket I/O事件的定义.I/O处理函数的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd I/O事件定义 sock中定义了几个I/ ...

  4. 2013暑假总结-SB学习

    经过暑假的学习,使英语原本基础不好的我找到了英语学习的感觉.方向.信心,暑假的这种团队学习英语的感觉才刚刚开始,即将开学了,我们并将保持着这学习的劲头坚持努力的做下去. 暑假35天英语的全职学习,对于 ...

  5. Activity堆栈管理

    task就好像是能包含很多activity的栈. 默认情况下,一个activity启动另外一个activity时,两个activity是放在同一个task栈中的,第二个activity压入第一个 ac ...

  6. Caffe + Ubuntu 15.04 + CUDA 7.0 安装以及配置

    作为小码农的我,昨天就在装这个东东了,主要参考第一篇博文,但是过程发现很多问题,经过反反复复,千锤百炼,终于柳暗花明,我把这个caffe给搞定了,是故,我发布出来,后之来者,欲将有感于斯文~ 本分分为 ...

  7. 【翻译】为Ext JS和Sencha Touch开发人员准备的应用程序监测（App Inspector）

    和其他的Sencha开发人员一样,我会花费大约半天的时间在我喜欢的IDE工具上编写JavaScript,而另一半时间则是在浏览器上测试和调试我的应用程序.在过去几年,每一个主要的浏览器都已大为改善.现 ...

  8. android采用SurfaceView实现文字滚动效果

    前言 为了实现文字的滚动效果,之前也重写了TextView效果都不太好,后来对SurfaceView进行完善. 声明     欢迎转载,但请保留文章原始出处:)  小崔博客:http://blog.c ...

  9. apache 负载测试工具 ab

    1.ab工具是apache自带的工具,可以测试服务器的负载能力 2.ab工具的参数 -v:版本 -c:并发数 -n:请求数 -t: 测试所进行的最大秒数 3.例子:ab -c 100 -n 100 - ...

  10. 避免"Physics Space Locked"错误

    在一些cocos2d中使用物理引擎的代码中,往往会出现如下错误: Aborting due to Chipmunk error: You cannot manually reindex objects ...