如何以大写字母单独显示下拉列表的选定值

How to display selected value of a dropdown alone in uppercase?

本文关键字：下拉列表 显示 大写字母 单独      更新时间：2023-09-26

我想以小写显示下拉列表的所有其他选项，除了所选选项。所选内容应以大写字母显示。

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

我认为，我们不能对选项元素进行样式化。除了自定义下拉列表之外，还有其他选择吗？

它在ipad上运行良好，因为ipad的默认行为和我预期的一样。但它在安卓系统中并不好。

你可以看到这个小提琴的下拉菜单。

您可以使用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>

相关文章：