详细的<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 ...
随机推荐
- Mybatis逻辑分页原理解析RowBounds
Mybatis提供了一个简单的逻辑分页使用类RowBounds(物理分页当然就是我们在sql语句中指定limit和offset值),在DefaultSqlSession提供的某些查询接口中我们可以看到 ...
- Oracle Enterprise Linux 64-bit 下Oracle11g的监听配置修改及测试步骤
测试环境:Oracle Enterprise Linux 64-bit (5.8版本) + Oracle 11g 64位 相关说明: Oracle11g64位软件的安装位置为/u01/app/orac ...
- 【翻译】使用Sencha Ext JS 6打造通用应用程序
原文:Using Sencha Ext JS 6 to Build Universal Apps {.aligncenter} 在Sencha和整个Ext JS团队的支持下,我很高兴能跟大家分享一下有 ...
- 《java入门第一季》之Arrays类前传（排序问题）
一:冒泡排序 /* * 数组排序之冒泡排序: * 相邻元素两两比较,大的往后放,第一次完毕,最大值出现在了最大索引处 * * 引申: * 利用冒泡排序法,可以获取一个数组的最大值(先冒泡排序,取最后一 ...
- webService详解（一）
[sql] 什么是webService WebService,顾名思义就是基于Web的服务.它使用Web(HTTP)方式,接收和响应外部系统的某种请求.从而实现远程调用. 1:从WebServi ...
- CCT之CAMERA TUNNING调试学习总结
原创链接:点击打开链接 对于MT6589平台camera调试的学习总结,camera调试学习的是对于raw类sensor的调试,对于yuv格式的sensor是由FAE帮助我们调试的. 首先在调试一个c ...
- 中国象棋游戏Chess（2） - 走棋
之前的文章请看:中国象棋游戏Chess(1) - 棋盘绘制以及棋子的绘制 现在实现走棋的功能. 首先需要获取点击到的棋子,用QWidget中的函数 mouseReleaseEvent 实现函数: vo ...
- C语言实现牛顿迭代法解方程
利用迭代算法解决问题,需要做好以下三个方面的工作: 一.确定迭代变量 在可以用迭代算法解决的问题中,我们可以确定至少存在一个可直接或间接地不断由旧值递推出新值的变量,这个变量就是迭代变量. 二.建立迭 ...
- 开源项目Git地址
1.陈明.李建勋.邓覃思 fog-aliyun https://git.oschina.net/dengqinsi/fog-aliyun.git 2.吴俊.骆仲军.袁良福 CDN的H5助 ...
- Android开发技巧——自定义单选或多选的ListView
这篇其实应该是属于写自定义单选或多选的ListView的基础教程,无奈目前许多人对此的实现大多都绕了远路,反而使得这正规的写法倒显得有些技巧性了. 本文原创,转载请注明在CSDN上的出处: http: ...