HTML States Dropdown - Display Selected Value Rather than Text

Question

I am creating an HTML select-option dropdown menu that displays the 50 states in their full spelling with the abbreviations as their underlying value.

When the dropdown is expanded, I want the user to see the full spelling of the states, but to save space I want the value, which is the abbreviation, to be on display in the closed dropdown once a selection has been made.

For example, the user would see Alabama when they expand the dropdown, but "AL" when they select that state. I have been unable to find a graceful solution to this seemingly simple problem.

Any ideas?

you can use jquery... write a function for the "onchange" event of dropdown.. see this stackoverflow link http://stackoverflow.com/questions/1974256/change-modify-the-dropdownlist-text-by-value-using-jquery — Gaurav Shah, May 08 '15 at 14:20
This solution changes the text in the expanded dropdown as well. I need the states to show their full spelling when the dropdown is expanded, but only show the abbreviation of the selected state when the dropdown is closed. — Isaac, May 08 '15 at 14:38
i said above that you need to write a function on the "onchange" event of dropdown. so when you select the dropdown, then only the text will change — Gaurav Shah, May 08 '15 at 14:43
I don't think this will solve my problem. The only reason I am trying to display the abbreviation in the closed box is to save space. With this suggestion the box will still be expanded to accommodate the full spellings. The text will merely change after a state is selected. — Isaac, May 08 '15 at 15:00
@Isaac Sad to not able to help you. See this post if you can use it: http://stackoverflow.com/questions/1801499/how-to-change-options-of-select-with-jquery?rq=1 — The Guest, May 08 '15 at 15:43
Possibly a duplicate of [this](http://stackoverflow.com/questions/22982742/bootstrap-select-option-display-value-instead-of-text). — Keerthi, May 08 '15 at 19:19
This is really close to what I'm looking for. However, if there is a preselected value I can't seem to prevent the full spelling from being displayed when the page loads and of course the dropdown is still as wide as it would be if I didn't mess with the abbreviation display in the first place. — Isaac, May 08 '15 at 20:30

score 1 · Answer 1 · answered Oct 09 '15 at 02:17

Sorry it looks a bit messy but you can fix it up. I'm giving you the idea! Here's a fiddle.

Oh by the way, it will work on Chrome only.

HTML:

<select id="myddl" name="state" onchange="SelectElement(this.value)" style="visibility:hidden;">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="DC">District of Columbia</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="HI">Hawaii</option>
    <option value="ID">Idaho</option>
    <option value="IL">Illinois</option>
    <option value="IN">Indiana</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NV">Nevada</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NM">New Mexico</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="ND">North Dakota</option>
    <option value="OH">Ohio</option>
    <option value="OK">Oklahoma</option>
    <option value="OR">Oregon</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="SD">South Dakota</option>
    <option value="TN">Tennessee</option>
    <option value="TX">Texas</option>
    <option value="UT">Utah</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WA">Washington</option>
    <option value="WV">West Virginia</option>
    <option value="WI">Wisconsin</option>
    <option value="WY">Wyoming</option>
</select>

<select id="leaveCode" name="state" onclick="openMyddl();">
    <option value="AL">AL</option>
    <option value="AK">AK</option>
    <option value="AZ">AZ</option>
    <option value="AR">AR</option>
    <option value="CA">CA</option>
    <option value="CO">CO</option>
    <option value="CT">CT</option>
    <option value="DE">DE</option>
    <option value="DC">DC</option>
    <option value="FL">FL</option>
    <option value="GA">GA</option>
    <option value="HI">HI</option>
    <option value="ID">ID</option>
    <option value="IL">IL</option>
    <option value="IN">IN</option>
    <option value="IA">IA</option>
    <option value="KS">KS</option>
    <option value="KY">KY</option>
    <option value="LA">LA</option>
    <option value="ME">ME</option>
    <option value="MD">MD</option>
    <option value="MA">MA</option>
    <option value="MI">MI</option>
    <option value="MN">MN</option>
    <option value="MS">MS</option>
    <option value="MO">MO</option>
    <option value="MT">MT</option>
    <option value="NE">NE</option>
    <option value="NV">NV</option>
    <option value="NH">NH</option>
    <option value="NJ">NJ</option>
    <option value="NM">NM</option>
    <option value="NY">NY</option>
    <option value="NC">NC</option>
    <option value="ND">ND</option>
    <option value="OH">OH</option>
    <option value="OK">OK</option>
    <option value="OR">OR</option>
    <option value="PA">PA</option>
    <option value="RI">RI</option>
    <option value="SC">SC</option>
    <option value="SD">SD</option>
    <option value="TN">TN</option>
    <option value="TX">TX</option>
    <option value="UT">UT</option>
    <option value="VT">VT</option>
    <option value="VA">VA</option>
    <option value="WA">WA</option>
    <option value="WV">WV</option>
    <option value="WI">WI</option>
    <option value="WY">WY</option>
</select>

JAVASCRIPT:

    function SelectElement(valueToSelect)
    {    
        var element = document.getElementById('leaveCode');
        element.value = valueToSelect;
        $('#myddl').attr('style', 'visibility:hidden');

    }

    function openMyddl()
    {
        $('#myddl').removeAttr('style');
        var dropdown = document.getElementById('myddl');
        showDropdown(dropdown);
    }

    showDropdown = function (element) {
        var event;
        event = document.createEvent('MouseEvents');
        event.initMouseEvent('mousedown', true, true, window);
        element.dispatchEvent(event);
    };

CSS:

    #leaveCode{
        position: relative;
        z-index: 10;
        left:-170px;
    }

HTML States Dropdown - Display Selected Value Rather than Text

1 Answers1