將HTML中所選選項的顯示值設置爲與顯示的選項文本不同

Question

我有一個選擇選項，並帶有以下示例選項。

(TYT) Toyota 

(HD) Honda 

(MT) Mitsubishi 

我想後其選項僅顯示在選擇框的縮寫被選擇是可能的，而不一個JavaScript事件監聽器根據選擇來設置值。

即TYT或(TYT)也很好。

任何想法？

Answer 1

你可以使用jQuery來做到這一點，是這樣的：

<select> 
     <option value="0" data-abbr="None">Select</option> 
     <option value="12" data-abbr="TTT">Toyota</option> 
     <option value="13" data-abbr="HD">Honda</option> 
     <option value="14" data-abbr="MT">Mitsubishi</option> 
    </select> 

    <script type="text/javascript"> 
    $(document).ready(function() { 
     $("select").change(function() { 
     var option = $(this).find("option:selected"); 
     option.text(option.data("abbr")); 
     }); 
    }); 
    </script> 

只需使用軌道生成你的選擇時，在必要的data-abbr屬性養活。

編輯這裏是一個沒有JS版本：

<style type="text/css"> 
    option.TTT:after { 
     content: " Toyota"; 
    } 
    </style> 
    <select> 
     <option value="0" data-abbr="None">Select</option> 
     <option value="12" class="TTT">TTT</option> 
     <option value="13" data-abbr="HD">Honda</option> 
     <option value="14" data-abbr="MT">Mitsubishi</option> 
    </select> 

這表明「TTT豐田」當你在列表中，但只有觸發值看，當你選擇它。每個選項都需要option.CLASS:after選擇器。