HTML select - display value attribute in HTML but retain option text

Question

I have a list of option states in a select element.

<select>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
</select>

I need the browser to display just the abbreviation of the state (which is presently stored in the value attribute) but the opened pull-down menu should still display the full name of the state. So a user will see and select "Arizona" in the pull-down menu and then the closed pull-down menu would display "AZ".

The first answer to this question was close, but it replaces the option text with value's value, so it does not work for me.

I'd like to use JavaScript / JQuery for this, but kudos to any wizard who can do this with just HTML and CSS.

Any ideas on how to make this happen?

Answer 1

In case you're still looking for an answer, here's how I would do it.

First off, I don't see much use-case doing this. It seems like a lot of effort just to abbreviate a word the users can read easily anyway. Though, here it is.

Because there's no real way to check the last selected unless we store it in a variable and then iterate the list to bring back the name when the user selects the input, it requires a great deal of effort. Though, we can store the data within the select inside an array, then persist that data wherever we want. I wouldn't recommend using data directly out of an HTML element in this case, but for now, you can see in the following example that storing the states within an array does the trick.

The following answer requires jQuery.

See the JSFiddle, or run the code:

;(function() {

    var states = [];
    var customSelect = $('.js-select');
    var customSelectOptions = customSelect.children();

    // Get each state then push them to the array
    // Initial state declaration
    customSelectOptions.each(function() {
        var state = $(this).text();
        states.push({ state: state });
        if ($(this).is(':selected')) {
            $(this).text($(this).attr('value'));
        }
    });

    // On focus, always retain the full state name
    customSelect.on('focus', function() {

        customSelectOptions.each(function(index) {   
            $(this).text(states[index].state);
        });

        // On change, append the value to the selected option
        $(this).on('change', function() {

            customSelectOptions.each(function(options) {
                if ($(this).is(':selected')) {
                    $(this).text($(this).attr('value'));
                }
            });

            // Un-focus select on finish
            $(this).blur();

        });

    });

}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="js-select">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
</select>