jQuery store and get extra data in html select

jQuery store and get additional extra data in select:

js:

$(function(){

	$('select').change(function() {

		alert( $('select').val() ); // alerts "val1"

		alert( $('select option:selected').text() ); // alerts "text1"

		alert( $('select option:selected').data('extra') ); // alerts "extra1"

	});

});

html:

<select name="select">

	<option value="val1" data-extra="extra1">text1</option>

	<option value="val2" data-extra="extra2">text2</option>

	<option value="val3" data-extra="extra3">text3</option>

</select>