如何以大寫形式單獨顯示下拉菜單的選定值？

我想顯示小型案例下拉列表中的所有其他選項，但所選的一個除外。選定的一個應以大寫顯示。如何以大寫形式單獨顯示下拉菜單的選定值？

select{ 
    text-transform: uppercase; 
} 
option{ 
    text-transform: lowercase !important; 
}

我認爲，我們不能設計選項元素。除了自定義下拉菜單，還有其他的選擇嗎？

它在ipad工作正常，因爲ipad的默認行爲與我的期望相同。但在android中不好。

您可以在此fiddle中看到下拉列表。

來源

2014-10-12 Gops AB

感謝Barmar。我應該刪除這個問題嗎？ – 2014-10-12 08:16:33

不，這不是必需的。標記爲重複就足夠了。 – Barmar 2014-10-12 08:17:08

@ user3801433 *「我想顯示所有其他選項，除了所選的小選項外，所選的一個應該以小寫形式顯示」*您的意思是選定的值應該是大寫的，如標題所示。 – 2014-10-12 08:28:24

您可以使用jQuery text()功能：

$("select").change(function() { 
 
    $(this).find("option").text(function (i, text) { 
 
     return $(this).is(":selected") ? text.toUpperCase() : text.toLowerCase() 
 
    }); 
 
}).trigger("change");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option>One</option> 
 
    <option>Two</option> 
 
</select>

來源

2014-10-12 08:17:17

@ user3801433這是因爲你的描述不清楚，這就是爲什麼我要求澄清..它現在已經修復 - 我更新了答案以及描述... – 2014-10-12 08:51:54

@ user3801433它在我的大寫字母chrome 37，IE 11，FF 32，Opera 24和Safari 5.17（* windows *）您正在使用哪種瀏覽器..？ – 2014-10-12 09:33:40

編輯：選中的選項在封閉視圖中以大寫字母顯示。當我展開它時，都是小寫字母。 – 2014-10-12 09:50:20

如何以大寫形式單獨顯示下拉菜單的選定值？

回答

相關問題