Question

我希望以小写的形式显示下拉列表的所有其他选项，除了所选的一个。选定的一个应以大写字母显示。

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

我认为，我们不能设置选项元素的样式。除了自定义下拉菜单之外还有其他选择吗？

它在ipad中工作正常，因为ipad的默认行为与我的期望相同。但它在android中并不好。

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

Answer 1

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

如何以大写形式单独显示下拉列表的选定值？

1 个答案: