将所有选择选项文本更改为大写，Jquery或CSS

Question

将以下国家/地区选项列表和显示的文本大写;

<select id="countrySelect"..>
    <option value="SG">Singapore</option>
    <option value="JP">Japan</option>
    ...
</select>

那些所有展示文字怎么能像 SINGAPORE ， JAPAN 等那样难以理解？

赞赏任何JQuery或CSS方式，哪一方更好？

Answer 1

使用CSS：

#countrySelect {
    text-transform:uppercase;
}

CSS解决方案更好，因为浏览器会为您完成所有工作。

Answer 2

使用Jquery，您可以使用.text()或.html()及其回调函数来设置大写值：

$('#countrySelect option').text(function(i,oldtext){
  return oldtext.toUpperCase();
});

<强> Working Demo

Answer 3

如果你想让jQuery使用toUpperCase（）

    $('#countrySelect option').each(function(){
      $(this).text($(this).text().toUpperCase());
    });

工作小提琴：http://jsfiddle.net/Jm9k6/

Answer 4

使用css

#countrySelect {text-transform:uppercase;}

Answer 5

如果需要，可以使用jQuery大写css：

$(document).ready(function() {
    $('#countrySelect').css('text-transform','uppercase');
});