How to get value of select option inside for loop

Question

I have a select option like this:

<select name="color" id="multipleAttr" class="form-control select-2">
   <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?

Does it print undefined when you're changing `.select-1` or `.select-2`? — code, Mar 01 '22 at 20:47
infamous for loop. https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — epascarello, Mar 01 '22 at 20:48
You realize that you don't need a loop right? JQuery binds `this` in event handlers and does all the heavy lifting for you: `$('select[class=^="select-"]').change(function() { var val = $(this).val(); console.log(val); });`. — code, Mar 01 '22 at 20:49
Use a common class! Why are you binding multiple things. Use jQuery and let the library handle it! `$(".select").change(function() { var val = $(this).val(); console.log(val); });` — epascarello, Mar 01 '22 at 20:49

Ali Hussnain - alichampion · Accepted Answer · 2022-03-01T21:03:11.487

1

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

edited Mar 01 '22 at 21:03

answered Mar 01 '22 at 20:48

Ali Hussnain - alichampion

559
1
5
17

This doesn't solve the problem. – code Mar 01 '22 at 20:49
2

`element` is a bad name for `event` – epascarello Mar 01 '22 at 20:50
`element.target.value` sort of defeats the purpose of jQuery... – code Mar 01 '22 at 20:52
@code I don't think so as jquery provides us this feature we should take benefit from this to avoid extra execution of finding element again from dom. – Ali Hussnain - alichampion Mar 01 '22 at 21:05
1

I meant that you could (and should) have used `$(this).val()`. – code Mar 01 '22 at 21:08
Yeah, that's also a good suggestion maybe you make an edit to answer. – Ali Hussnain - alichampion Mar 01 '22 at 21:09

score 1 · Answer 2 · answered Mar 01 '22 at 21:25

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>

How to get value of select option inside for loop

2 Answers2