jquery - 如何从 jQuery(document).on ('change' ，...) 获取选择标签值

Question

在span内有一个默认选择框

示例在这里 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) 单击选择框并更改值。

2)结果显示下一个选择框

3)如果我单击下一个选择框，我想提醒(例如)所单击的选择框的id。但我看到上面选择框的警报。

这里是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'    

我的意思是，我单击了'.location'，单击了某个选择框，我必须获取单击的类的attr('id')。为什么我得到第一个选择框的类的attr('id')？

我是否需要使用诸如.closest之类的东西来获取单击的选择框的ID？如果.closest，那么最接近什么？

Answer 1

使用$(this)代替$('.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