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

Question

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

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

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

this question的第一个答案已接近，但它将option文本替换为value的值，因此它对我无效。

我想为此使用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>

Answer 2

JavaScript将被要求这样做。我使用Chrome将this demo放在一起，因此select的宽度可能需要进行调整，以使其在所有浏览器中都很好看。

CSS

select { 
    width: 12px; 
    border: 0; 
    /* text-indent: -999em; */ /* or hide text so the width can be set higher */ 
} 

HTML

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

脚本

$(function(){ 
    $('select').on('change', function(){ 
     $('.select-value').html(this.value); 
    }).change(); 
}); 

---

更新：为了减轻使文字可点击的关注，更多的代码可以被添加，然后重新定位选择（demo）

CSS

select { 
    width: 50px; 
    border: 0; 
    text-indent: -999em; 
} 
.select-value { 
    position: relative; 
    left: 30px; 
    z-index: 1; 
} 

脚本

$(function() { 
    $('select').on('change', function() { 
     $('.select-value').html(this.value); 
    }).change(); 

    $('.select-value').on('click', function() { 
     $('select').focus(); 
    }); 
}); 

Answer 3

肯定不能在HTML和CSS来实现.. JS在这里是必需。

那么你可以使用“change（）”jQuery函数来处理更改选项的操作。然后你可以通过'selected'属性获取selected选项值，并将其作为选择的选项文本，然后在select元素上使用“click（）”并将选项文本返回原始值。

这是棘手的游戏，不干净。

其他选项将创建一些容器来存储所选选项的值。在这种情况下，您将需要将此容器设置为选择按钮，并在单击时选择元素将被单击（此处为更多javascript）。

在你的情况下，我会搜索一个漂亮而强大的选择元素插件，这将盛大你的需求。

Answer 4

嗯，我没有考虑使用blur和focus事件。如果使用jQuery是一个选项：

$('select').on('blur focus', function (e) { 
    $(this.options).text(function() { 
     return e.type === 'focus' 
       ? this.getAttribute('data-default-text') 
       : this.value; 
    }); 
}).children().attr('data-default-text', function() { 
    return this.textContent; 
}); //.end().on('change', function() { $(this).blur(); }).blur(); 

http://jsfiddle.net/0vre3cmg/