使用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));
});

播放here

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文本转换应该有效。

如果你想用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);