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
– code, Commented Mar 1, 2022 at 20:47
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
– code, Commented Mar 1, 2022 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
– epascarello, Commented Mar 1, 2022 at 20:49

Ali Hussnain - alichampion · Accepted Answer · 2022-03-01 21:03:11Z

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 1, 2022 at 21:03

answered Mar 1, 2022 at 20:48

Ali Hussnain - alichampion

1,0612 gold badges13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

code Over a year ago

This doesn't solve the problem.

epascarello Over a year ago

element is a bad name for event

code Over a year ago

element.target.value sort of defeats the purpose of jQuery...

Ali Hussnain - alichampion Over a year ago

@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.

code Over a year ago

I meant that you could (and should) have used $(this).val().

|

Kinglish · Accepted Answer · 2022-03-01 21:25:59Z

1

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>

answered Mar 1, 2022 at 21:25

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

Collectives™ on Stack Overflow

How to get value of select option inside for loop

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related