请问如何获取多个相同id的select下的选中项

请问,我有如下代码

<select id="rwid1">
  <option id="1">首页</option>
  <option id="2">次页</option>
  <option id="3">末页</option>
</select>
<select id="rwid1">
  <option id="1">首页</option>
  <option id="2">次页</option>
  <option id="3">末页</option>
</select>
<select id="rwid1">
  <option id="1">首页</option>
  <option id="2">次页</option>
  <option id="3">末页</option>
</select>

请问如何获取每个 select 的选中项呢?

<script>
  $('#rwid1').each(() => {
    $(this).on('change', (e) => {
      console.log(e.target)
    })
  })
</script>

自己已尝试用如上方法,但是只能获取到当前 select
实在不知道如何获取到每个 select 下的选中项呢?
还望指点,谢谢!

已解决 悬赏分:40 - 解决时间 2021-11-27 06:56
反对 0举报 0 收藏 0

回答4

最佳
  • @

    把html中的select标签id改成class

     $('.rwid1').each(function(){
       $(this).on('change', (e) => {
          console.log(e.target.selectedOptions[0].value)
       })
    })`
    支持 0 反对 0 举报
    2021-11-27 02:31
  • @

    id难道不该是唯一的吗...

    支持 0 反对 0 举报
    2021-11-27 03:23
  • @

    ID选择器只会查询到第一个匹配的项, 即使$('#id').each()也只能获取到第一个匹配项.
    如果必须要使用相同的ID来定义标签, 可以使用标签选择器

    $('select[id]').change(function() {
        console.log(this.value);
    });

    当然即使使用该方法也不太好区分到底是哪个<SELECT>的值被改变了, 还需要一些辅助工具(使用索引标记/业务标记等等):

    $('select[id]').change(function() {
        var $this = $(this);
        console.log($this.index()); // 1. 确定索引不会改变
        
        // 或者通过业务标记来区分
        // this.dataset.key
        $this.attr('data-key'); 
    });
    
    
    $('select[id]').each(function(){
        // 2. select应该是动态生成的, 可以为每个select添加业务标记
        $(this).attr('data-key', busUniqueKey); 
    });
    
    支持 0 反对 0 举报
    2021-11-27 03:52
  • @

    嗯,ID都可以重复用,那要class干嘛

    支持 0 反对 0 举报
    2021-11-27 04:52