我们使用表单下拉列表选择数据，如省、市、县、年、月等数据，我们即可使用下拉菜单表单进行设置。
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. jsoup详解

    json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是"用来跨域的",一直不知道具体是个什么东西.今天总算搞明白了.下面一步步来搞清楚jsonp是个什么玩 ...

  2. TCP的定时器系列 — 零窗口探测定时器

    主要内容:零窗口探测定时器的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd 出现以下情况时,TCP接收方的接收缓冲区将被塞满数据: 发送方的发送速 ...

  3. hive的top n

    注意 hive 的hsql没有 top n这个功能,不像sql. 所以实现top n如下: 我想说的SELECT TOP N是取最大前N条或者最小前N条. Hive提供了limit关键字,再配合ord ...

  4. 小强的HTML5移动开发之路（10）——在线画板

    来自:http://blog.csdn.net/dawanganban/article/details/18094557 在这一篇文章中我们用html5来实现一个在线的画板,玩过你画我猜的朋友今天也可 ...

  5. 4.1、Libgdx的生命周期

    (原文:http://www.libgdx.cn/topic/32/4-1-libgdx%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F) 一个libgdx应 ...

  6. ceres-solver库使用示例

    上一篇博客大致说明了下ceres-solver库的编译,然后形成了一个二次开发的库,下面就是用这个二次开发库来写一个简单(其实不太简单)的DEMO来演示ceres-solver库的强大.我们以求解一个 ...

  7. MPEG-7 视觉描述符

    本文节选自<基于MPEG-7与内容的图像检索技术的研究>. MPEG-7 标准中视觉描述工具包括基本结构和描述符.本文主要介绍各描述符. (1)颜色描述符 MPEG-7 主要定义了七种颜色 ...

  8. 【cocos 2d-x】VS2013+cocos2d-x3.3Final+Adriod交叉编译环境配置（超详细版）

    本系列文章由@二货梦想家张程 所写,转载请注明出处. 作者:ZeeCoder  微博链接:http://weibo.com/zc463717263 我的邮箱:michealfloyd@126.com ...

  9. Lucene 学习资料

    个机制的结合.关于中文的语言分析算法,大家可以在Google查关键词"wordsegment search"能找到更多相关的资料. 安装和使用 下载:http://jakarta. ...

  10. ZeroC Ice Ice Registry实现负载均衡

    Registry介绍         对于多个IceBox集群该怎么负载均衡?以服务注册表Registry为依托的Service Locator组件,以及依赖其而诞生的强大的分分布式框架-IceGri ...