jquery - 需要选择列表来显示值，而不是文本

Question

http://jsbin.com/uluwum/3/edit

我有一个美国州的选择列表，我只希望在默认情况下和选择不同的州后显示两个字母缩写版本。So it needs to display the selected value instead of the selected text when a select list is in its default state, but still display the option text when clicked on, but I can't figure out how to do that. 我不认为这会是一件困难的事情，但要么我尝试的搜索太离谱以至于没有返回相关结果，要么这是一个不寻常的请求。

我把我极其蹩脚的尝试在上面的 JSBin 示例中都注释掉了。

提前致谢！

保罗

Answer 1

$(function(){
        $('#states option').each(function(){
            $(this).attr('data-text', $(this).text());
            if($(this).is(':selected') == false)
            {
               $(this).text($(this).val());
            }        
        });

        $('select').on('change', function(){
            reset();
            var selected = $('option:selected');
            selected.text(selected.attr('data-text'));
        });

        function reset()
        {
          $('#states option').each(function(){
            $(this).text($(this).val());
          });  
        }
    });

http://jsfiddle.net/UMs98/2/

这应该做你想要的。

Answer 2

这是我能得到的最接近的结果：jsFiddle example

$('select option').each(function() {
    $(this).data('abbr', $(this).val());
    $(this).data('full', $(this).text());
    $(this).text($(this).val());
});
$('select').change(function() {
    $('option:selected', this).text($('option:selected', this).data('full'));
    $('option:not(":selected")', this).each(function(){
        $(this).text($(this).data('abbr'));
    });
});​