如何在循环内部获取选择选项值

Question

我有这样一个选择：

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

现在，为了用jQuery返回这个值，我执行了以下操作：

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

它工作良好，并正确地显示选定项的值。

但是我想通过使用for循环来更动态地实现这一点：

var counters = 2;

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

因此，它应该选择select-2类值，并将其作为val返回。

但它以某种方式打印了未定义的。

那么这里出了什么问题？我怎样才能解决这个问题？

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

既然如此，为什么要用数字循环类名呢？只需设置一个类来表示具有此功能的所有select元素，然后根据需要设置其他信息的数据属性。

​

$('.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>

​