我需要在<select>
中的选择选项上使文字大写。我找到了working example using jQuery,但我需要将其转换为 vanilla JS 。
我实际上非常接近,当你选择一个选项时,它会将所选值设为大写。但是当你选择另一个时,它也会将前一个选项保留为大写。
我无法弄清楚怎么说&#34;大写所有选项除了所选的选项,我希望它是大写的#34;。
任何指导都将不胜感激。
答案 0 :(得分:3)
如何使用CSS
* {
font-family: arial;
}
select option {
text-transform: capitalize;
}
select, select option:checked {
text-transform: uppercase;
}
<select name="title" id="title">
<option selected="" disabled="">Categories</option>
<option value="photo-galleries">Photo Galleries</option>
<option value="photography">photography</option>
<option value="romeo-juliet">Romeo & Juliet</option>
<option value="swan-lake">Swan Lake</option>
<option value="symmetries">Symmetries</option>
</select>
<select name="day" id="day">
<option selected="" disabled="">Day of the week</option>
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select>
这里也是一个javascript版本
[].slice.call( document.querySelectorAll('option') ).forEach(ucfirst);
document.getElementById('title').addEventListener('change', fn, false);
document.getElementById('day').addEventListener('change', fn, false);
function ucfirst(el) {
el.innerHTML = el.innerHTML.charAt(0).toUpperCase() + el.innerHTML.slice(1).toLowerCase();
}
function fn() {
var options = this.getElementsByTagName('option');
var selected = options[this.selectedIndex];
[].slice.call(options).forEach(ucfirst);
selected.value = selected.innerHTML = selected.innerHTML.toUpperCase();
}