Jquery $ (document) by the value of the change in one of the class selection fields that wants to alert the selected option of the current selection window

Question

There is one checkbox for selecting default inside span

An example here is http://jsfiddle.net/pzphbnxb/18/

 <span id="all_locations"> <select name="united_kingdom" id="united_kingdom" class="location" > <option value="blank">Select</option> <option value="england">England</option> </select> </span> 

1) Click on the selection field and change the value.

2) As a result, you can display the following checkbox

3) If I click on the next box, I want to warn you (for example) id of the selected block select. But I see a warning above the selection box above.

Here is jQuery

 $(document).on('change', '.location', function(){ $('#all_locations').append('<select name="loc_in_england" id="loc_in_england" class="location" ><option value="blank">Select</option><option value="london">London</option>'); alert ( $('.location').find(":selected").val() + ' selected val' ); alert( $(".location").attr('id') + ' select id' ); }); //$(document).on('change' 

I mean, I clicked '.location' , clicking on a specific select flag, I should get attr('id') from the clicked class. Why do I get the attr('id') class of the first select block?

Do I need to use something like .closest to get the identifier of the selected window? If .closest , then closest to what?

Answer 1

use $(this) instead of $('.location')

 $(document).on('change', '.location', function(){ // alert('test'); $('#all_locations').append('<select name="loc_in_england" id="loc_in_england" class="location" ><option value="blank">Select</option><option value="london">London</option>'); alert ( $(this).find(":selected").val() + ' selected val' ); alert( $(this).attr('id') + ' select id' ); }); //$(document).on('change' 

Demo

Answer 2

http://jsfiddle.net/pzphbnxb/22/

try it

 alert ($(this).find(":selected").val() + ' selected val' ); alert( $(this).attr('id') + ' select id' );