需要选择列表中显示的值，而不是文本

http://jsbin.com/uluwum/3/edit 需要选择列表中显示的值，而不是文本

我有美国的选择列表指出，我只希望这两个字母，缩写版本默认显示和选择不同的状态之后。因此，当选择列表处于其默认状态时，它需要显示选定的值而不是选定的文本，但在点击时仍显示选项文本，但我无法弄清楚如何实现。我并不认为这将是一件困难的事情，但是我所尝试过的搜索都很遥远，因为没有相关的结果被返回，或者这是一个不寻常的要求。

我把我非常蹩脚的尝试都放在上面的JSBin例子中全部注释掉了。

在此先感谢！

保罗

来源

2012-10-22 Realto619

$(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/

这应该做你想要什么。

来源

2012-10-22 20:36:10

我不认为我解释这非常好：我想它做你的榜样的工作方式正好相反。它应该默认显示缩写状态名称，但是当你点击选择列表时显示完整的状态名称。这样我可以使选择列表的宽度比现在小得多。 – Realto619

我不认为你的描述可以做，而不使用模拟下拉的div容器，然后将选定的值放在它对应的选项上，有点像查找下拉...使用实际的html drop downtheres没有数据地图涉及到 –

@大卫埃斯特维斯 - 我做了一个改变你的解决方案，以解决我的可怜的初步解释，我得到它做的第一部分，这是设置初始选择的价值，而不是文本但我还没有想出如何获得更改事件来做同样的事情：http://jsfiddle.net/UMs98/3/ – Realto619

这是关于尽可能靠近我可以得到：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')); 
    }); 
});

来源

2012-10-22 20:42:57 j08691

请原谅我最初的解释，因为它显然不够清楚：除了选定的选项之外，我想保留全部状态名称，然后如果选择了另一个选项，则该条目将使用两个字母缩写和一个之前选择的项目需要再次显示全名。这是一半：http://jsfiddle.net/UMs98/3/感谢您抽出宝贵时间。我完全赞赏这一努力...... – Realto619

需要选择列表中显示的值，而不是文本

回答

相关问题