Question

我需要在<select>中的选择选项上使文字大写。我找到了working example using jQuery，但我需要将其转换为 vanilla JS 。

我实际上非常接近，当你选择一个选项时，它会将所选值设为大写。但是当你选择另一个时，它也会将前一个选项保留为大写。

我无法弄清楚怎么说＆＃34;大写所有选项除了所选的选项，我希望它是大写的＃34;。

任何指导都将不胜感激。

Here is a working Fiddle of where I am so far

Answer 1

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

FIDDLE

使用vanilla JS在下拉列表中选择选项大写

1 个答案: