如何在for循环中获取select选项的值

Question

我有这样的 select 选项：

<select name="color" id="multipleAttr" class="form-control select-2">
   <option value="blue">
   <option value="red">
</select>

现在为了return这个值和jQuery，我这样做了：

$(".select-2").change(function() {
      var val = $(".select-2").val();
      console.log(val);
});

它工作正常并正确显示 selected 项目的价值。

但我想通过使用 for 循环使其更加动态：

var counters = 2;

for(i=2;i<=counters;i++){
   $(".select-"+i).change(function() {
      var val = $(".select-"+i).val();
      console.log(val);
   });
}

所以它应该是 selecting select-2 class 值并且 return 将其作为 val。

但它以某种方式打印 undefined。

那么这里出了什么问题？我该如何解决这个问题？

Answer 1

您应该使用在 .change 方法中提供给您的事件，而不是在 .change 回调中再次从 dom 获取元素。

所以你的代码会像

var counters = 2;

for(i=2;i<=counters;i++){
   $(".select-"+i).change(function(event) {
      var val = event.target.value;
      console.log(val);
   });
}

Answer 2

就此而言，为什么要遍历 class 带有数字的名称？只需设置一个 class 来表示具有该功能的所有 select 元素，然后根据需要设置 data-attributes 以获得其他信息。

$('.select').change(function() {
  let val = $(this).val();
  let myName = $(this).data('num');
  console.log(`new val is ${val} from ${myName}`);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class='select' data-num='select-1'>
  <option selected></option>
  <option value='33'>33</option>
</select>
<select class='select' data-num='select-2'>
  <option selected></option>
  <option value='55'>55</option>
</select>

如何在for循环中获取select选项的值

How to get value of select option inside for loop

html

javascript

jquery

select

for-loop