Javascript HTML状态下拉列表-显示选定值而不是文本

我正在创建一个HTML

select option

下拉菜单，该菜单以完整的拼写显示50个州，缩写作为其基本值

当下拉列表展开时，我希望用户看到状态的完整拼写，但为了节省空间，我希望在进行选择后，该值（缩写）将显示在关闭的下拉列表中。

---

例如，用户在展开下拉列表时会看到阿拉巴马州，但在选择该州时会看到“AL”。对于这个看似简单的问题，我一直无法找到一个优雅的解决方案

---

有什么想法吗？

对不起，看起来有点乱，但你可以把它修好。我给你这个主意！这是一个例子

哦，顺便说一下，它只能在Chrome上工作

HTML:

CSS:

---

您可以使用jquery。。。为下拉列表的“onchange”事件编写函数。。请参阅此stackoverflow链接。此解决方案也会更改扩展下拉列表中的文本。当下拉列表展开时，我需要状态显示其完整拼写，但当下拉列表关闭时，只显示所选状态的缩写。我上面说过，您需要在下拉列表的“onchange”事件上编写函数。所以当你选择下拉菜单时，只有文本会改变，我不认为这能解决我的问题。我试图在封闭框中显示缩写的唯一原因是为了节省空间。根据这一建议，该框仍将扩展以容纳完整的拼写。文本只会在选择状态后更改。@Isaac很抱歉无法帮助您。如果可以使用，请参阅此帖子：

<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>

    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);
    };

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