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

Question

请问，我有如下代码

<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 下的选中项呢？
还望指点，谢谢！

Answer 1

把html中的select标签id改成class

 $('.rwid1').each(function(){
   $(this).on('change', (e) => {
      console.log(e.target.selectedOptions[0].value)
   })
})`

Answer 2

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

Answer 3

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); 
});

Answer 4

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