首页 > 代码库 > html select用法总结
html select用法总结
本文将介绍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="http://www.mamicode.com/1">1</option>16 <option value="http://www.mamicode.com/2" selected>2</option>17 <option value="http://www.mamicode.com/3">3</option>18 </select>19 </div>20 21 22 <div>23 <h3>js使某一项选中</h3>24 <select name="test" id="test2">25 <option value="http://www.mamicode.com/1">1</option>26 <option value="http://www.mamicode.com/2">2</option>27 <option value="http://www.mamicode.com/3">3</option>28 </select>29 <script>30 var test2 = document.getElementById(‘test2‘);31 test2.value=http://www.mamicode.com/‘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="http://www.mamicode.com/1">1</option>41 <option value="http://www.mamicode.com/2">2</option>42 <option value="http://www.mamicode.com/3">3</option>43 </select>44 <script>45 var test3 = document.getElementById(‘test3‘);46 test3.onchange = function(e){47 //经常看到有的代码这样写this.options[this.selectedIndex].value48 //其实不用那么复杂，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="http://www.mamicode.com/1">1</option>59 <option value="http://www.mamicode.com/2">2</option>60 <option value="http://www.mamicode.com/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="http://www.mamicode.com/1">text1</option>74 <option value="http://www.mamicode.com/2">text2</option>75 <option value="http://www.mamicode.com/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下调用 textContent82 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/ 大家可以在这里测试
html select用法总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。