如何使选择选项的内部文本大写？答案

【问题标题】：How do I make the inner text of a select option uppercase?如何使选择选项的内部文本大写？
【发布时间】：2014-11-14 08:44:26
【问题描述】：

我的问题很简单：我有一个包含多个选项的选择，我想做的就是让这些的内部文本（也就是下拉菜单中显示的文本）完全大写。

目前我看起来像这样（编译后的 html）：

<select class="select required form-control" id="home_region" name="home[region]">
<option value=""></option>
<option value="ag">Ag</option>
<option value="ar">Ar</option>
<option value="ai">Ai</option>
<option value="be">Be</option>
...

我的 Ruby on Rails 代码（Rails 4 使用 Simple Form Gem）是：

f.input :region, collection: Home::Region::REGIONS.map { |region| [ t(region, scope: 'regions'), region] }, label: 'Region'

上面映射的 'Home::Regions::REGIONS' 是一个简单的数组，其中填充了区域（与相应 html 选项的值标记中的格式相同）。

它是如何变成大写的，css，jquery，ruby 对我来说并不重要，任何可行的都可以：)

提前感谢您的帮助！

【问题讨论】：

@emmanuel ：该死，使用 select#home_regions 成功了！我之前试图用 css 更改单个选项，但失败了。非常感谢 m8 的快速回答！

标签： javascript html ruby-on-rails-4 simple-form

【解决方案1】：

如果外观是你所追求的，你最好使用 CSS：

#home_region option {
  text-transform: uppercase;
}

【讨论】：

【解决方案2】：

我将建议使用 CSS 文本转换属性解决此问题。

#home_region {

text-transform: uppercase;

}

【讨论】：

【解决方案3】：

 function upperConvrt()
    {
        $("#home_region option").each(function()
        {
            $(this).text($(this).text().toUpperCase())
        });
    }

页面加载完毕后调用上述方法

【讨论】：