javascript - 如何将选择选项的内部文本设为大写？

Question

我的问题很直接:我有一个包含多个选项的选择，我想做的就是让这些选项的内部文本(也就是下拉列表中显示的文本)完全大写。

目前我看起来像这样(编译后的 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 代码(使用 Simple Form Gem 的 Rails 4)是:

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

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

它是如何变成大写的对我来说并不重要，css、jquery、ruby，任何能工作的都很好:)

提前感谢您的帮助!

Answer 1

如果外观是您所追求的，那么您最好使用 CSS:

#home_region option {
  text-transform: uppercase;
}