You can use context
syntax with this
or $(this)
. This is the same effect as find()
.
$('select').change(function() {_x000D_
console.log('Clicked option value => ' + $(this).val());_x000D_
<!-- undefined console.log('$(this) without explicit :select => ' + $(this).data('id')); -->_x000D_
<!-- error console.log('this without explicit :select => ' + this.data('id')); -->_x000D_
console.log(':select & $(this) => ' + $(':selected', $(this)).data('id'));_x000D_
console.log(':select & this => ' + $(':selected', this).data('id'));_x000D_
console.log('option:select & this => ' + $('option:selected', this).data('id'));_x000D_
console.log('$(this) & find => ' + $(this).find(':selected').data('id'));_x000D_
});
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<select>_x000D_
<option data-id="1">one</option>_x000D_
<option data-id="2">two</option>_x000D_
<option data-id="3">three</option>_x000D_
</select>
_x000D_
As a matter of microoptimization, you might opt for find()
. If you are more of a code golfer, the context syntax is more brief. It comes down to coding style basically.
Here is a relevant performance comparison.