Other answers wasn't working for me so i developed solution:
I created option with class="option-item" for easy targeting
HTML :
<select id="select-test">
<option value="5-val" id="first-id" class="option-item"> First option </option>
</select>
Then for every selected option i added display none property
CSS:
option:checked {
display: none;
}
Now we can add change to our SelectBox to find our selected option with display none property by simple :hidden attribute
JQuery:
$('#select-test').change(function(){
//value
$('#select-test').find('.option-item:hidden').val();
//id
$('#select-test').find('.option-item:hidden').attr('id');
//text
$('#select-test').find('.option-item:hidden').text();
});
Working fiddle: https://jsfiddle.net/Friiz/2dk4003j/10/