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

Vincent 发表于 Dev

文森特

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

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

我需要浏览器仅显示状态的缩写（当前存储在value属性中），但是打开的下拉菜单仍应显示状态的全名。因此，用户将在下拉菜单中看到并选择“亚利桑那”，然后关闭的下拉菜单将显示“ AZ”。

这个问题的第一个答案很接近，但是它用的值替换了option文本value，因此对我不起作用。

我想为此使用JavaScript / JQuery，但是对于仅使用HTML和CSS就能做到这一点的任何向导都表示赞赏。

关于如何实现这一目标的任何想法？

詹姆斯·马丁·戴维斯

如果您仍在寻找答案，这就是我会做的。

首先，我没有看到很多用例。似乎只是为了简化用户无论如何都可以轻松阅读的单词而付出了很多努力。虽然，这是。

因为没有真正的方法来检查最后选择的内容，除非我们将其存储在变量中，然后在用户选择输入时迭代列表以带回名称，因此需要大量的工作。不过，我们可以将数据存储在数组内的select中，然后将其持久化到我们想要的任何位置。在这种情况下，我不建议直接从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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。