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


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

    1.  
      <body>
    2.  
      <select name="n_select" class="c_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" class="c_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,导致获取不到值。和我一样粗心大意的童鞋需要注意下,不要再犯这种低级错误啦 ♪(^∇^*)!

  • 相关阅读:
    NanoMQ Newsletter 202206|规则引擎正式发布 & NanoSDK 支持 MQTT over QUIC
    EMQX Newsletter 202206|与 HStreamDB 集成、充电桩通信协议 OCPP 网关开发…
    将 EMQX Cloud 数据通过公网桥接到 AWS IoT
    使用 EMQX Cloud 实现物联网设备一机一密验证
    asm:NASM汇编语言的环境配置(rockylinuxlinux)
    Hibernate 级联添加删除
    DropDownList二级无刷新功能实现
    ASP.NET之AJAX分页步骤
    常用的获取时间差的sql语句
    asp.net中时间差的问题
  • 原文地址:https://www.cnblogs.com/onesea/p/13819918.html
Copyright © 2020-2023  润新知