html select用法总结
本文将介绍select 原生的常用方法,这些都是经过测试,兼容ie6到ie10,及chrome,火狐等,也就是说大部分浏览器都兼容。如果大家发现有不兼容的情况,可以跟我留言。
我们对基本的用法了如指掌后,jQuery、kissy这些框架用起来更方便。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>select用法总结</title>
</head>
<body>
<h3>select的常用方法</h3>
<hr/> <div>
<h3>默认选中某一项,使用option的selected属性</h3>
<select name="test" id="test1">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
</div> <div>
<h3>js使某一项选中</h3>
<select name="test" id="test2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script>
var test2 = document.getElementById('test2');
test2.value='3';
//kissy用法
//S.one('#test2').val('3');
</script>
</div> <div>
<h3>事件绑定,获取选中项的值</h3>
<select name="test" id="test3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script>
var test3 = document.getElementById('test3');
test3.onchange = function(e){
//经常看到有的代码这样写this.options[this.selectedIndex].value
//其实不用那么复杂,this.value就可以取到当前选中项的值,所有浏览器都支持
var val = this.value; //var val = test3.value;
alert(val);
}
</script>
</div> <div>
<h3>获取选中项的index</h3>
<select name="test" id="test4">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script>
var test4 = document.getElementById('test4');
test4.onchange = function(e){
var idx = this.selectedIndex; //从0开始
alert(idx);
}
</script>
</div>
<div>
<h3>获取选中项的text</h3>
<select name="test" id="test5">
<option value="1">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</select>
<script>
var test5 = document.getElementById('test5');
test5.onchange = function(e){
var selOption = this.options[this.selectedIndex]; //var val = test3.value;
// ie,chrome 下调用 innerText 其他浏览器如firefox下调用 textContent
var text = selOption.innerText || selOption.textContent; //兼容性
//所有浏览器都支持w3c标准的innerHTML,如果text里有标签可以通过正则替换
var html = selOption.innerHTML;
alert(text);
alert(html);
}
</script>
</div> </body>
</html>
代码地址:http://jsfiddle.net/6o1fdvm0/ 大家可以在这里测试
html select用法总结的更多相关文章
- 网络通信 --> select()用法
select()用法 头文件 #include <sys/time.h> #include <sys/types.h> #include <unistd.h> 定义 ...
- python+selenium七:下拉框、选项框、select用法
# from selenium import webdriverfrom selenium.webdriver.common.action_chains import ActionChainsimpo ...
- golang学习之select用法
早期的select函数是用来监控一系列的文件句柄,一旦其中一个文件句柄发生IO操作,该select调用就会被返回.golang在语言级别直接支持select,用于处理异步IO问题. select用法同 ...
- 数据库Oracle的select用法(部分)
Oracle的select用法(部分): 1.查询所有: select * from employees; 2.加上where子句:用选择限制行 select * from employees whe ...
- 每天玩转3分钟 MyBatis-Plus - 6. select 用法
每天玩转3分钟 MyBatis-Plus - 1. 配置环境 每天玩转3分钟 MyBatis-Plus - 2. 普通查询 每天玩转3分钟 MyBatis-Plus - 3. 高级查询(一) 每天玩转 ...
- select用法&原理详解(源码剖析)(转)
今天遇到了在select()前后fd_set的变化问题,查了好久终于找到一个有用的帖子了,很赞,很详细!!原文链接如下: select用法&原理详解(源码剖析) 我的问题是: 如下图示:在se ...
- select用法
每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select&g ...
- shell编程中的select用法
select 语句 select表达式是bash的一种扩展应用,擅长于交互式场合.用户可以从一组不同的值中进行选择: select var in ... ; do break; done .... n ...
- 非阻塞式socket的select()用法
Select在Socket编程中还是比较重要的,可是对于初学Socket的人来说都不太爱用Select写程序,他们只 是习惯写诸如 connect.accept.recv或recvfrom这样的阻塞程 ...
随机推荐
- 用Apache Kafka构建流数据平台
近来,有许多关于“流处理”和“事件数据”的讨论,它们往往都与像Kafka.Storm或Samza这样的技术相关.但并不是每个人都知道如何将这种技术引入他们自己的技术栈.于是,Confluent联合创始 ...
- Jquery 操作xml 文档的方法
需求: 页面上有两个下拉框,显示游戏大区 和游戏服务器,当游戏大区改变时,游戏服务器也跟着改变 界面部分html代码 <tr class="tkSigUser"> &l ...
- 数据库设置表的check约束出现乱码
采用默认的方式见了一个数据库,但是有个表里需要建一个check约束.将约束保存之后再打开看到中文成了??.后来查了一下是数据库排序规则除了问题. 详见两图即可明白: 这里的约束中文显示乱码: 按下图设 ...
- javascript设计模式4
静态成员是直接通过类对象访问的 var Book=(function(){ var numOfBooks=0; function checkIsbn(isbn){ ... } return funct ...
- leetcode@ [322] Coin Change (Dynamic Programming)
https://leetcode.com/problems/coin-change/ You are given coins of different denominations and a tota ...
- Java程序员的10道XML面试题
包括web开发人员的Java面试在内的各种面试中,XML面试题在各种编程工作的面试中很常见.XML是一种成熟的技术,经常作为从一个平台到其他平台传输数据的标准.XML面试问题包括用于转换XML文件的X ...
- Java之ByteArrayInputStream和ByteArrayOutputStream-操作字节数组的类
ByteArrayInputStream和ByteArrayOutputStream 源:内存中的字节数组 目的:内存中的字节数组 这两个流对象不涉及底层资源的调用,操作的都是内存中的数组,所以不需要 ...
- Keil Mdk5.0 破解包 和谐包【worldsing笔记】
有关Keil MDK 5.0的介绍和下载 http://www.cnblogs.com/worldsing/p/3355911.html 下载地址 点击下载:http://pan.baidu.com/ ...
- 【Stage3D学习笔记续】山寨Starling(十二):总结和一些没提到的东西
我们的山寨Starling到这里就告一段落了,不得不说这是一个非常优秀的2D框架,他的设计和架构为后来的许多框架都提供了很好的参考,比如现在正在崛起的Egret,我们的一番解读也只是窥见了Starli ...
- ECSHOP在线手册布局参考图--商品分类页 category.dwt
A.购物车 1,设置方法 程序自动读取购物车的商品数量 2,代码相关 cart.lbi 中 {insert_scripts files='transport.js'} <div clas ...