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

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

mysql基础篇 - SELECT 语句详解
基础篇 - SELECT 语句详解 SELECT语句详解一.实验简介 SQL 中最常用的 SELECT 语句,用来在表中选取数据,本节实验中将通过一系列的动手操作详细学习 SELEC ...
linux select函数详解
linux select函数详解在Linux中,我们可以使用select函数实现I/O端口的复用,传递给 select函数的参数会告诉内核: •我们所关心的文件描述符 •对每个描述符,我们所关心的状 ...
lucene、lucene.NET详细使用与优化详解
lucene.lucene.NET详细使用与优化详解 2010-02-01 13:51:11 分类: Linux 1 lucene简介1.1 什么是luceneLucene是一个全文搜索框架,而不是应 ...
Git学习系列之Windows上安装Git详细步骤（图文详解）
前言最初,Git是用于Linux下的内核代码管理.因为其非常好用,目前,已经被成功移植到Mac和Windows操作系统下. 鉴于大部分使用者使用的是Windows操作系统,故,这里详细讲解Windo ...
npm安装vue详细教程（图片详解）
npm安装vue详细教程(图片详解) 一.总结一句话总结:整个安装流程照着教程来,注意系统环境变量的配置,注意一下npm的本地仓库和缓存位置教程系统环境变量仓库缓存 1.什么情况下最适合用n ...
[转载，感觉写的非常详细]DUBBO配置方式详解
[转载,感觉写的非常详细]DUBBO配置方式详解原文链接:http://www.cnblogs.com/chanshuyi/p/5144288.html DUBBO 是一个分布式服务框架,致力于提供 ...
MySQL之SELECT 语句详解
本文参考实验楼的SELECT 语句详解结合自己操作部分而写成. 注意:大多数系统中,SQL语句都是不区分大小写的,但是出于严谨和便于区分保留字和变量名,在书写的时,保留字应大写,而变量名应小写.所谓的 ...
lucene.NET详细使用与优化详解
lucene.NET详细使用与优化详解 http://www.cnblogs.com/qq4004229/archive/2010/05/21/1741025.html http://www.shan ...
28、vSocket模型详解及select应用详解
在上片文章已经讲过了TCP协议的基本结构和构成并举例,也粗略的讲过了SOCKET,但是讲解的并不完善,这里详细讲解下关于SOCKET的编程的I/O复用函数. 1.I/O复用:selec函数在介绍so ...

随机推荐

分布式进阶(十二)Docker固定Container IP
使用pipework工具. 前提:每个Container所做的工作现在还很少,可以不用save.commit. 为了便于通信,自定义一个网桥(192.168.1.180/24),使之IP与宿主主机IP ...
NSDate-日期类 OC——第七天(1)
1.总结前面学习的Oc中的几种数据类型 NSInteger NSUinteger CGFloat NSString NSMutableString NSSArray NSMutableArray NS ...
org/w3c/dom/ElementTraversal 错误解决办法
org/w3c/dom/ElementTraversal 错误解决办法不记得之前几天把什么maven依赖包删除了,今天利用htmlunit运行代码的时候报了下面的错误: Exception in t ...
Android StringEntity() 和 UrlEncodedFormEntity() 的区别
今天在做安卓客户端向服务器提交数据的过程中,在组织POST数据时,用了UrlEncodedFormEntity()这个方法,但是后台报错,说是无法解析json内容. 按照本来的想法,向后台发送的是 j ...
MySQL的一些常用的SQL语句整理
安装MySQL有两种的方式,一种是解压版本,但是需要配置环境变量,相对而言比较麻烦.所以我们一般采取第二种方式,那就是到MySQL的官网上下载安装版.这样就会省去很多麻烦,在这里我就不再详细的介绍具体 ...
mysql进阶(七)limit的用法
limit是mysql的语法 select * from table limit m,n 其中m是指记录开始的index,从0开始,表示第一条记录 n是指从第m+1条开始,取n条. select * ...
OpenCV 实现哈哈镜效果
代码,有参考别人的代码 // haha_mirror.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostrea ...
Oracle EBS BOM模块常用表结构
表名: bom.bom_bill_of_materials 说明: BOM清单父项目 BILL_SEQUENCE_ID NUMBER 清单序号(关键字)ASSEMBLY_ITEM_ID NUMBE ...
EasyUI中tree,Datagrid,pagenation的使用EasyUI中Datagrid和pagenation进行关联时，再次点击pagenation时让表格数据显示的问题
// 获取选中一行的情况,下面的一个参数可以代表一个DataGridfunction getSelected(dialogEle,dataFileTextEle) { // 获取选中一行的情况. va ...
Java-ServletOutputStream
/** * Provides an output stream for sending binary data to the * client. A <code>ServletOutput ...

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

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

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

随机推荐

热门专题