使用 Javascript 将选择选项大写

Question

我有一个下拉菜单。

我一直在尝试将选择选项中的文本大写，但无法使其正常工作。

---

JS

$.each(responseData.assignments, function(i, v) {
  var chapterNum = v.contentLabel;
  var assessmentType = v.assessmentType.toLowerCase().replace(/_/g, " ");

  var sameAssignmentType = $('#assignment-type-dd option').filter(function(){
      return $(this).text() == assessmentType;
  })

  if(!sameAssignmentType.length){
    $('#assignment-type-dd').append('<option value="' + assessmentType + '">' +
        assessmentType + '</option>');
  }

});

我试过将此代码链接到我的assessmentType ：

.charAt(0).toUpperCase() + this.slice(1)

但是一旦我这样做，它就会出错：

Uncaught TypeError: this.slice is not a function

有人可以在这里给我一点提示吗？ 谢谢。

Answer 1

这应该有效（CSS 方法）

#assignment-type-dd option {
    text-transform: capitalize;
}

如果您需要整个选项文本为大写，请使用此选项。

#assignment-type-dd option {
    text-transform: uppercase;
}

如果您真的讨厌 CSS 或者您需要将大写文本传递给服务器或进行其他操作，请使用以下 JavaScript 代码

var capitalizeMe = "";
$("#assignment-type-dd option").each(function() {

  capitalizeMe = $(this).text();
  $(this).text(capitalizeMe.charAt(0).toUpperCase() + capitalizeMe.substring(1));
});

在这里播放

Answer 2

不要使用this.slice(1) ，而是尝试使用assessmentType.slice(1) 。

Answer 3

您需要将其格式化为

 string.charAt(0).toUpperCase() + string.slice(1)

Answer 4

一种解决方案可能是使用 CSS 规则：

select option {
    text-transform:capitalize;
}

Answer 5

我们也可以通过 CSS 交替来操作字体设置。 尝试这个

<style>
 select option {
   text-transform:capitalize;
}
</style>

Answer 6

这似乎是 CSS 最适合解决的问题。

.select {
   text-transform: uppercase;
}

Answer 7

为此，您不需要 jQuery，除非您尝试将每个单词的第一个字母大写。 在这种情况下，纯 JavaScript 解决方案（假设您的目标是h2元素）将是：

var a = document.getElementsByTagName('h2');
for (i = 0; i < a.length; i++) {
    var words = a[i].innerHTML.split(" ");
    for (j = 0; j < words.length; j++) {
        if (words[j][0] != "&") {
            words[j] = "<span class='first-letter'>" + words[j][0] + "</span>" + words[j].substring(1);
        }
    }
    a[i].innerHTML = words.join(" ");
}

http://jsfiddle.net/ryanpcmcquen/2uLLqy8r/

否则纯 css 将起作用： text-transform: capitalize;

https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

Answer 8

如果只是显示它，那么 css text-transform 应该可以工作。

如果您想在 Javascript 中以编程方式执行此操作，我建议创建一个函数并根据需要调用它：

 function stringCapitalize(str){
   if (str){
      str = str.charAt(0).toUpperCase() + str.slice(1);
      return str;
   }
}

stringCapitalize("moemen"); // returns "Moemen"

如果你认为你会在这个应用程序中经常使用它，那么将它添加到内置的 String.prototype 中：

String.prototype.stringCapitalize = function () { 
    if (this){
      str = this;
      str = str.charAt(0).toUpperCase() + str.slice(1);
      return str;
   }
}

"moemen".stringCapitalize() // returns "Moemen"

Answer 9

var name = prompt("what is your name"); 
var firstchar = name.slice(0, 1); 
var firstcharuppercase = firstchar.toUpperCase(); 
var restofName = name.slice(1,name.length); 
var capitlisedName = firstcharuppercase + restofName; 
alert(" Hello " + capitlisedName);