javascript - jQuery - get value from a select when there are several -

i dynamically inserting many selects on page depending on user inputs. select lists identical , share similar names.

when user chooses option, want grab value. (in end i'm trying accomplish disable chosen value other lists, re-enable if value changed. 1 step @ time)

i assuming need use $(this) apparently not know how values second, third lists, , on.

the html this:

<select name="category[first]">     <option value="1">1</option>     <option value="2">2</option>     <option value="3">3</option> </select>  <select name="category[second]">     <option value="1">1</option>     <option value="2">2</option>     <option value="3">3</option> </select>  ** many more lists same naming convention 

as jquery, trying this:

$('body').on('change', $('select[name^="category"]', function(){     alert( $(this).find('option:selected').val() ); }); 

but gives me value first select, , not subsequent ones. understanding have use $('body') or $('document') since dynamically created elements.

any appreciated, thank you.

remove $( before selector. selector needs string, not jquery object

$('body').on('change', 'select[name^="category"]', function(){      console.log( $(this).find('option:selected').val() );  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  <select name="category[first]">      <option value="1">1</option>      <option value="2">2</option>      <option value="3">3</option>  </select>    <select name="category[second]">      <option value="1">1</option>      <option value="2">2</option>      <option value="3">3</option>  </select>