Question

I have multiple dynamically set select boxes on my page (like over 100). I am trying to get the values of each box individually on change, but when the change takes place it iterates over every select box since they all have the same class. How can I get the values of each select box individually then do something…

Example

<select id="(dynamically set, may be different every time)" class="selection">
  <option value=""></option>
  <option value="dynamically set">1</option><option value="dynamically set">2</option>
  <option value="dynamically set">3</option>
</select>
<select id="(dynamically set, may be different every time)" class="selection">
  <option value=""></option>
  <option value="dynamically set">1</option>
  <option value="dynamically set">2</option>
  <option value="dynamically set">3</option></select>
<select id="(dynamically set, may be different every time)" class="selection">
  <option value=""></option>
  <option value="dynamically set">1</option>
  <option value="dynamically set">2</option>
  <option value="dynamically set">3</option></select>
etc...

JS

<script type="text/javascript">
//Psuedo code
$('.selection').change(function(){alert('test');});
</script>

Answer 1

$('.selection').change(function() {
    console.log(this.value);
    //or
    console.log($(this).val());
});