本文将介绍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用法总结的更多相关文章

  1. 网络通信 --> select()用法

    select()用法 头文件 #include <sys/time.h> #include <sys/types.h> #include <unistd.h> 定义 ...

  2. python+selenium七：下拉框、选项框、select用法

    # from selenium import webdriverfrom selenium.webdriver.common.action_chains import ActionChainsimpo ...

  3. golang学习之select用法

    早期的select函数是用来监控一系列的文件句柄,一旦其中一个文件句柄发生IO操作,该select调用就会被返回.golang在语言级别直接支持select,用于处理异步IO问题. select用法同 ...

  4. 数据库Oracle的select用法（部分）

    Oracle的select用法(部分): 1.查询所有: select * from employees; 2.加上where子句:用选择限制行 select * from employees whe ...

  5. 每天玩转3分钟 MyBatis-Plus - 6. select 用法

    每天玩转3分钟 MyBatis-Plus - 1. 配置环境 每天玩转3分钟 MyBatis-Plus - 2. 普通查询 每天玩转3分钟 MyBatis-Plus - 3. 高级查询(一) 每天玩转 ...

  6. select用法&原理详解（源码剖析）（转）

    今天遇到了在select()前后fd_set的变化问题,查了好久终于找到一个有用的帖子了,很赞,很详细!!原文链接如下: select用法&原理详解(源码剖析) 我的问题是: 如下图示:在se ...

  7. select用法

    每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select&g ...

  8. shell编程中的select用法

    select 语句 select表达式是bash的一种扩展应用,擅长于交互式场合.用户可以从一组不同的值中进行选择: select var in ... ; do break; done .... n ...

  9. 非阻塞式socket的select()用法

    Select在Socket编程中还是比较重要的,可是对于初学Socket的人来说都不太爱用Select写程序,他们只 是习惯写诸如 connect.accept.recv或recvfrom这样的阻塞程 ...

随机推荐

  1. linux time命令参数--执行命令并计时

    [命令]time — 执行命令并计时 [格式]time [-p] command [arguments...] [说明] 执行命令行"command [arguments...]" ...

  2. 【转】C数据存储(包括const存储在哪，C++不同部分我在文中用红字已指出)

    非原创(文中红字为自己见解,如有不对,请大神指点) 程序由指令和数据组成,C语言程序亦是如此.开发者在编写程序的时候往往需要根据不同数据的特点以及程序需求来选择不同的数据存储方式,那么在C语言中数据的 ...

  3. microsoft的罗马帝国——浪潮之巅

    其实开始读微软的这篇已经比较久了,从来学校的前一天晚上等车的时候就开始读了,直到今天才看完.嗯,微软的确是个帝国. 那就从头开始讲把,关于帝国的传奇都是比较长的故事呢.至于我的叙述水平和我的知识水平都 ...

  4. 你真的知道HTML吗？

    经过几次面试当中,被问及到最基础的东西,没想到回答不上来,有点蛋痛,今天特地的复习了一下!! 内容: 1.Doctype(文档类型)的作用是什么?有多少文档类型? 2.浏览器标准模式和怪异模式之间的区 ...

  5. OpenCV - Operations on Arrays 对数组(矩阵)的一些操作

    Function (函数名) Use (函数用处) add 矩阵加法,A+B的更高级形式,支持mask scaleAdd 矩阵加法,一个带有缩放因子dst(I) = scale * src1(I) + ...

  6. leetcode@ [62/63] Unique Paths II

    class Solution { public: int uniquePathsWithObstacles(vector<vector<int>>& obstacleG ...

  7. Poj2002 Squares

    题意描述:有一堆平面散点集,任取四个点,求能组成正方形的不同组合方式有多少.相同的四个点,不同顺序构成的正方形视为同一正方形. 思路变迁: 1.最简单的方法,直接暴力搜索,即依次取四个顶点,根据其坐标 ...

  8. Google的IP地址一览表,加上代理服务器

    Bulgaria 93.123.23.1 93.123.23.2 93.123.23.3 93.123.23.4 93.123.23.5 93.123.23.6 93.123.23.7 93.123. ...

  9. 将Sublime Text 2搭建成一个好用的IDE

    将Sublime Text 2搭建成一个好用的IDE 说起编辑器,可能大部分人要推荐的是Vim和Emacs,本人用过Vim,功能确实强大,但是不是很习惯,之前一直有朋友推荐SUblime Text 2 ...

  10. 【Stage3D学习笔记续】山寨Starling（七）：一般优化方法简介及混合模式

    关于事件的优化: 遍历注册的事件由foreach改变为fori,在大量数据遍历时会有提升: 事件池优化: 所有的事件都使用一个对象池进行保存,而不是使用到时进行创建,使用EventDispatcher ...