欢迎访问 如意编程网！
TAG聚合

如意编程网

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

如何找到所有 HTML select 标签的选中项

发布时间：2022/11/16 HTML 14 老码农
如意编程网 收集整理的这篇文章主要介绍了 如何找到所有 HTML select 标签的选中项 小编觉得挺不错的,现在分享给大家,帮大家做个参考.
  1.   <body>
  2.   <select name="n_select" id="i_select1">
  3.   <option value="1">1</option>
  4.   <option value="2">2</option>
  5.   <option value="3" selected>3</option>
  6.   <option value="4">4</option>
  7.   <option value="5">5</option>
  8.   </select>
  9.   <select name="n_select" id="i_select2">
  10.   <option value="1">1</option>
  11.   <option value="2">2</option>
  12.   <option value="3">3</option>
  13.   <option value="4" selected >4</option>
  14.   <option value="5">5</option>
  15.   </select>
  16.   </body>

以下就是js的部分:

  1.   <script type="text/javascript">
  2.    
  3.   JQ:
  4.   获取所有选中的项（获取所有的select的选中项需遍历载具体取相应的值）
  5.   $('[name=n_select] :selected');
  6.   $('.c_select option:selected');
  7.   $('.c_select').find('option:selected');
  8.    
  9.   获取select 选中的值（只返回第一个select ）
  10.   $('[name=n_select] :selected').text(); // 获取select选中项的文本
  11.   $('[name=n_select] :selected').val(); // 获取select选中项的值
  12.    
  13.   $('.c_select option:selected').text(); // 获取select选中项的文本
  14.   $('.c_select option:selected').val(); // 获取select选中项的值
  15.    
  16.   $('.c_select').find('option:selected').text(); // 获取select选中项的文本
  17.   $('.c_select').find('option:selected').val(); // 获取select选中项的值
  18.    
  19.    
  20.   JS:
  21.   // 兼容至IE9+
  22.   var tag_select = document.getElementsByClassName('c_select'); // 获取所有select
  23.   // 至少兼容值IE7,IE6没测试
  24.   var tag_select = document.getElementsByTagName('select'); // 获取所有select
  25.   // 至少兼容值IE7,IE6没测试
  26.   var tag_select = document.getElementsByName('n_select'); // 获取所有select
  27.    
  28.   // 至少兼容值IE7,IE6没测试 （下面索引1只是随便举例，可遍历 tag_select 获取所有的）
  29.   var tag_sValue = tag_select[1].value; // 获取某个select选中项的值
  30.   var tag_sIndex = tag_select[1].selectedIndex; // 获取某个select选中项的索引
  31.   var tag_oValue = tag_select[1].options[tag_sIndex].value; // 获取某个select选中项的值
  32.   var tag_oTexts = tag_select[1].options[tag_sIndex].text; // 获取某个select选中项的文本 .text 或者 .innerText 都可以获取
  33.    
  34.   </script>

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

总结

以上是如意编程网为你收集整理的如何找到所有 HTML select 标签的选中项的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错，欢迎将如意编程网推荐给好友。