需要選擇列表中顯示的值，而不是文本

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

需要選擇列表中顯示的值，而不是文本

回答

相關問題