本文将介绍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>
代码地址：http://jsfiddle.net/6o1fdvm0/ 大家可以在这里测试
时间： 2024-12-15 01:51:11