shortState-to-fullState

by ALEKSEY SHULMAN

HTML

<select id="stateCode">
    <option data-text="NY - New-York" value="NY">NY - New-York</option>
    <option data-text="AZ - Arizona" value="AZ">AZ - Arizona</option>
</select>

CSS

select {width:150px;}

JavaScript

$('#stateCode option:selected').html($('#stateCode option:selected').attr('value'));

 $('#stateCode').on('change mouseleave', function () {
     $('#stateCode option').each(function () {
         $(this).html($(this).attr('data-text'));
     });
     $('#stateCode option:selected').html($('#stateCode option:selected').attr('value'));
     $(this).blur();
 });
 $('#stateCode').on('focus', function () {
     $('#stateCode option').each(function () {
         $(this).html($(this).attr('data-text'));
     });
 });