html select用法总结

浏览数：51 / 时间：2015年06月09日

本文将介绍select 原生的常用方法，这些都是经过测试，兼容ie6到ie10,及chrome，火狐等，也就是说大部分浏览器都兼容。如果大家发现有不兼容的情况，可以跟我留言。

我们对基本的用法了如指掌后，jQuery、kissy这些框架用起来更方便。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>select用法总结</title>
 6 </head>
 7 <body>
 8 <h3>select的常用方法</h3>
 9 <hr/>
10 
11 
12 <div>
13     <h3>默认选中某一项,使用option的selected属性</h3>
14     <select name="test" id="test1">
15         <option value="1">1</option>
16         <option value="2" selected>2</option>
17         <option value="3">3</option>
18     </select>
19 </div>
20 
21 
22 <div>
23     <h3>js使某一项选中</h3>
24     <select name="test" id="test2">
25         <option value="1">1</option>
26         <option value="2">2</option>
27         <option value="3">3</option>
28     </select>
29     <script>
30         var test2 = document.getElementById(‘test2‘);
31         test2.value=‘3‘;
32         //kissy用法
33         //S.one(‘#test2‘).val(‘3‘);
34     </script>
35 </div>
36 
37 <div>
38     <h3>事件绑定，获取选中项的值</h3>
39     <select name="test" id="test3">
40         <option value="1">1</option>
41         <option value="2">2</option>
42         <option value="3">3</option>
43     </select>
44     <script>
45         var test3 = document.getElementById(‘test3‘);
46         test3.onchange = function(e){
47             //经常看到有的代码这样写this.options[this.selectedIndex].value
48             //其实不用那么复杂，this.value就可以取到当前选中项的值，所有浏览器都支持
49             var val = this.value; //var val = test3.value;
50             alert(val);
51         }
52     </script>
53 </div>
54 
55 <div>
56     <h3>获取选中项的index</h3>
57     <select name="test" id="test4">
58         <option value="1">1</option>
59         <option value="2">2</option>
60         <option value="3">3</option>
61     </select>
62     <script>
63         var test4 = document.getElementById(‘test4‘);
64         test4.onchange = function(e){
65             var idx = this.selectedIndex; //从0开始
66             alert(idx);
67         }
68     </script>
69 </div>
70 <div>
71     <h3>获取选中项的text</h3>
72     <select name="test" id="test5">
73         <option value="1">text1</option>
74         <option value="2">text2</option>
75         <option value="3">text3</option>
76     </select>
77     <script>
78         var test5 = document.getElementById(‘test5‘);
79         test5.onchange = function(e){
80             var selOption = this.options[this.selectedIndex]; //var val = test3.value;
81             // ie,chrome 下调用 innerText 其他浏览器如firefox下调用 textContent
82             var text = selOption.innerText || selOption.textContent; //兼容性
83             //所有浏览器都支持w3c标准的innerHTML,如果text里有标签可以通过正则替换
84             var html = selOption.innerHTML;
85             alert(text);
86             alert(html);
87         }
88     </script>
89 </div>
90 
91 </body>
92 </html>