使用原版 JS 在下拉列表中将所选选项设置为大写

Make the selected option uppercase in a dropdown using vanilla JS

本文关键字：选项 设置 原版 JS 下拉列表      更新时间：2023-09-26

我只需要在<select>中将所选选项的文本大写。我找到了一个使用 jQuery 的工作示例，但我需要将其转换为原版 JS。

我实际上已经非常接近了，当您选择一个选项时，它会使所选值大写。但是当您选择另一个选项时，它也会将上一个选项保留为大写。

我不知道怎么说"大写除所选选项之外的所有选项，我希望它是大写的"。

任何指导将不胜感激。

这是我目前所处的位置的工作小提琴。

只使用 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 &amp; 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();
}

小提琴

相关文章：