javascript - HTML select - 在 HTML 中显示值属性但保留选项文本

Question

我在 select 元素中有一个 option 状态列表。

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

我需要浏览器只显示州的缩写(目前存储在 value 属性中)，但打开的下拉菜单仍应显示州的全名。因此，用户将在下拉菜单中看到并选择“Arizona”，然后关闭的下拉菜单将显示“AZ”。

this question的第一个答案很接近，但它用 value 的值替换了 option 文本，所以它对我不起作用。

我想为此使用 JavaScript/JQuery，但感谢任何可以仅使用 HTML 和 CSS 完成此操作的向导。

关于如何实现这一点有什么想法吗？

Answer 1

如果您仍在寻找答案，我会按照以下方式进行解答。

首先，我没有看到很多用例这样做。只是为了缩写一个用户可以轻松阅读的单词似乎需要付出很多努力。不过，它就在这里。

因为没有真正的方法来检查最后选择的，除非我们将它存储在一个变量中，然后迭代列表以在用户选择输入时取回名称，这需要大量的工作。但是，我们可以将数据存储在数组内的选择中，然后将数据持久化到我们想要的任何地方。在这种情况下，我不建议直接使用 HTML 元素中的数据，但现在，您可以在下面的示例中看到，将状态存储在数组中可以达到目的。

以下答案需要 jQuery .

参见 JSFiddle ，或运行代码:

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