jquery on('change'... not working in multiple tags

Question

I can't get the .val() of my second input select when I use jquery .on('change' function()

I have 2 select elements:

<select id="itemsA">
   <option selected disabled>Select option</option>
   <option value="a">Item A</option>
   <option value="b">Item B</option>
   <option value="c">Item C</option>
   <option value="d">Item D</option>
</select>
<select id="itemsB">
   <option selected disabled>Select option</option>
   <option value="1">Item 1</option>
   <option value="2">Item 2</option>
   <option value="3">Item 3</option>
   <option value="4">Item 4</option>
</select>

Here is my jquery code

$(document).ready(function(){
    $("select").on('change', function(){
        var mySel = $("select").val();
        console.log(mySel);
    });
});

I get the value of the first input select but the second one always give me null as value check.

You need to reference them by ID. – Nicklas Pouey-Winger Apr 26 '16 at 20:07 — Nicklas Pouey-Winger, Apr 26 '16 at 20:07

score 5 · Accepted Answer · answered Apr 26 '16 at 20:08

$(document).ready(function(){
    $("select").on('change', function(){
        var mySel = $(this).val();
        console.log(mySel);
    });
});

You need to use this!

** When you were using $('select') the val function can return a string only so it returns the first available value out of the selection made of 2 in your case

jquery on('change'... not working in multiple tags

1 Answers1

Linked