使用JavaScript大写选择选项 [英] Capitalize select option using Javascript

问题描述

我有一个下拉菜单.

我一直试图在我的选择选项中使用大写字母，但是我无法使其正常工作.

I've been trying to capitalize the text inside my select option, but I couldn't make it work.

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:

I've tried chaining this code to my assessmentType :

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

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

But as soon as I do that it give error :

Uncaught TypeError: this.slice is not a function

有人可以在这里给我一点提示吗?谢谢.

Can someone please give me a little hint here ? Thanks.

推荐答案

这应该有效(CSS方法)

This should work (CSS approach)

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

如果您需要整个选项文本都大写，请使用它.

If you need the entire options text to be uppercase use this.

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

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

And if you really hate CSS or you need the Capitalized text to be passed to server or do some other manipulation, use the below JavaScript code

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

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

在此处

这篇关于使用JavaScript大写选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！