How to get value of select option inside for loop-CodePudding

I have a select option like this:

<select name="color" id="multipleAttr" >
   <option value="blue">
   <option value="red">
</select>

Now in order to return the value of this with jQuery, I did this:

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

It works fine and properly shows the value of selected item.

But I wanted to make this more dynamically by using a for loop:

var counters = 2;

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

So it should be selecting select-2 class value and returns it as val.

But it prints undefined somehow.

So what's going wrong here? How can I solve this issue?

CodePudding user response：

You should use the event provided to you in the .change method instead of again getting the element from dom in the .change callback.

So your code will be like

var counters = 2;

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

CodePudding user response：

For that matter, why loop through classnames with numbers? Just set a single class to represent all select elements with the functionality, and then set data-attributes for other info if you need it.

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