详细的<select>下拉列表详解

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

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

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

 

1、动态创建selectfunction 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对象,

  

时间: 2024-10-07 05:31:01

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

mysql基础篇 - SELECT 语句详解

基础篇 - SELECT 语句详解 SELECT语句详解 一.实验简介 SQL 中最常用的 SELECT 语句,用来在表中选取数据,本节实验中将通过一系列的动手操作详细学习 SELECT 语句的用法. 二.实验准备 在正式开始本实验内容之前,需要先下载相关数据库表,搭建好一个名为mysql_shiyan 的数据库(有三张表:department,employee,project),并向其中插入数据. 具体操作如下,首先输入命令进入 /home/shiyanlou/Desktop 目录: cd /

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

lucene.lucene.NET详细使用与优化详解 2010-02-01 13:51:11 分类: Linux 1 lucene简介1.1 什么是luceneLucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么拿来就能用,它只是提供了一种工具让你能实现这些产品. 1.2 lucene能做什么要 回答这个问题,先要了解lucene的本质.实际上lucene的功能很单一,说到底,就是你给它若干个字符串,然后它为你提供一个全文搜

MySQL之SELECT 语句详解

本文参考实验楼的SELECT 语句详解结合自己操作部分而写成. 注意:大多数系统中,SQL语句都是不区分大小写的,但是出于严谨和便于区分保留字和变量名,在书写的时,保留字应大写,而变量名应小写.所谓的保留字,即为:在高级语言中已定义过的字,使用者不能将这些字作为变量名和过程名使用. 1)SELECT语句的基本格式是:SELECT 查询的列名 FROM 表名 WHERE 限制条件:在上一篇博客创建一个简单的成绩管理系统 中,使用SELECT * FROM employee代表查询所有的列.例如,要

java爬取网页内容 简单例子(2)——附jsoup的select用法详解

http://www.cnblogs.com/xiaoMzjm/p/3899366.html [背景] 在上一篇博文java爬取网页内容 简单例子(1)——使用正则表达式 里面,介绍了如何使用正则表达式去解析网页的内容,虽然该正则表达式比较通用,但繁琐,代码量多,现实中想要想出一条简单的正则表达式 对于没有很好正则表达式基础的人——比如说我T_T——是一件蛮困难的事.这一篇,我们改用jsoup,一个强大的解析html工具,去解析html,你会发现,一切都变得很容易. [准备工作] 下载:jsou

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

[转载,感觉写的非常详细]DUBBO配置方式详解 原文链接:http://www.cnblogs.com/chanshuyi/p/5144288.html DUBBO 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是阿里巴巴 SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点. Dubbo采用全spring配置方式,透明化接入应用,对应用没有任何API侵入,只需用Sp

lucene、lucene.NET详细使用与优化详解[转]

1 lucene简介1.1 什么是luceneLucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么拿来就能用,它只是提供了一种工具让你能实现这些产品. 1.2 lucene能做什么要 回答这个问题,先要了解lucene的本质.实际上lucene的功能很单一,说到底,就是你给它若干个字符串,然后它为你提供一个全文搜索服务,告诉你 你要搜索的关键词出现在哪里.知道了这个本质,你就可以发挥想象做任何符合这个条件的事情了.你可以把站

vSocket模型详解及select应用详解

1.I/O复用:selec函数 在介绍socket编程之前,首先要熟悉下I/O多路转接技术,尽管SOCKET通信编程有很多模型,但是,在UNIX环境下,使用I/O多路转接模型无疑是一种更好的选择,UNIX下有5种I/0模型,分别是阻塞式I/O.非阻塞式I/O.I/O复用(select和poll).信号驱动式I/O,异步I/O.这5种方式都可用SOCKET编程,这里只介绍阻塞式I/O和I/O复用,如果向详细了解I/O模型的,可以参考<UNIX网络编程卷一:套接字联网API>,或着查看 Socke

select函数详解(转)

Select函数在Socket编程中还是比较重要的,可是对于初学Socket的人来说都不太爱用Select写程序,他们只是习惯写诸如connect. accept.recv或recvfrom这样的阻塞程序(所谓阻塞方式block,顾名思义,就是进程或是线程执行到这些函数时必须等待某个事件的发生,如果事件没有发生,进程或线程就被阻塞,函数不能立即返回).可是使用Select就可以完成非阻塞(所谓非阻塞方式non-block,就是进程或线程执行此函数时不必非要等待事件的发生,一旦执行肯定返回,以返回

linux select函数详解

在Linux中,我们可以使用select函数实现I/O端口的复用,传递给 select函数的参数会告诉内核: •我们所关心的文件描述符 •对每个描述符,我们所关心的状态.(我们是要想从一个文件描述符中读或者写,还是关注一个描述符中是否出现异常) •我们要等待多长时间.(我们可以等待无限长的时间,等待固定的一段时间,或者根本就不等待) 从 select函数返回后,内核告诉我们一下信息: •对我们的要求已经做好准备的描述符的个数 •对于三种条件哪些描述符已经做好准备.(读,写,异常) 有了这些返回信