HTML

【HTML】查找select标签选中项

Posted by ARTROY on 2019-02-20

这篇文章原先写在Segmentfault的账号上面，现在拷贝到这里~
链接地址：https://segmentfault.com/a/1190000015075258

HTML片段展示

话不多说，咱就直奔主题吧，直接展示代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <select name="n_select" class="c_select" id="i_select1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3" selected>3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <select name="n_select" class="c_select" id="i_select2">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4" selected >4</option>
        <option value="5">5</option>
    </select>
</body>

JavaScript片段展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script type="text/javascript">


  /** JQ: **/ 

  // 获取所有选中的项（获取所有的select的选中项需遍历载具体取相应的值）
  $('[name=n_select] :selected');
  $('.c_select option:selected');
  $('.c_select').find('option:selected');
  
  // 获取select 选中的值（只返回第一个select ）
  $('[name=n_select] :selected').text();                     // 获取select选中项的文本 
  $('[name=n_select] :selected').val();                      // 获取select选中项的值 
  
  $('.c_select option:selected').text();                     // 获取select选中项的文本
  $('.c_select option:selected').val();                      // 获取select选中项的值
  
  $('.c_select').find('option:selected').text();             // 获取select选中项的文本
  $('.c_select').find('option:selected').val();              // 获取select选中项的值
  
  
  
  /** JS: **/ 

  // 兼容至IE9+
  var tag_select = document.getElementsByClassName('c_select');    // 获取所有select 
  // 至少兼容值IE7,IE6没测试
  var tag_select = document.getElementsByTagName('select');        // 获取所有select
  // 至少兼容值IE7,IE6没测试 
  var tag_select = document.getElementsByName('n_select');         // 获取所有select
  
  // 至少兼容值IE7,IE6没测试 （下面索引1只是随便举例，可遍历 tag_select 获取所有的）
  var tag_sValue = tag_select[1].value;                            // 获取某个select选中项的值
  var tag_sIndex = tag_select[1].selectedIndex;                    // 获取某个select选中项的索引
  var tag_oValue = tag_select[1].options[tag_sIndex].value;        // 获取某个select选中项的值
  var tag_oTexts = tag_select[1].options[tag_sIndex].text;         // 获取某个select选中项的文本 .text 或者 .innerText 都可以获取
</script>

Tips：温馨提示

我在写代码 js 部分的时候 tag_select[1].options[tag_sIndex] 中的 options 老是忽略 s 写成 option，导致获取不到值。和我一样粗心大意的童鞋需要注意下，不要再犯这种低级错误啦 ♪(^∇^*)！


赏 支付宝打赏 微信打赏

欣赏此文，打赏一下



标签
HTML
参与社区
-->