1

I need to make the text uppercase on the selected option only in a <select>. I found a working example using jQuery but I need to convert it to vanilla JS.

I've actually got it pretty close, when you choose an option, it makes the selected value uppercase. But when you choose another, it leaves the previous option uppercase also.

I can't figure out how to say "Capitalise all options EXCEPT the selected option, which I would like to be uppercase".

Any guidance will be appreciated.

Here is a working Fiddle of where I am so far.

Community
  • 1
  • 1
MikeeBee
  • 47
  • 1
  • 10

1 Answers1

3

How about just using 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>

Here's a javascript version as well

[].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

adeneo
  • 312,895
  • 29
  • 395
  • 388
  • This is great! But unfortunately I need it to work in Webkit browsers (Chrome, Safari). I notice that this doesn't work. I assume this is a bug in those browsers. Is there a workaround or do I still need to explore a JavaScript solution? – MikeeBee Feb 03 '16 at 05:38
  • I notice that it's working on Chrome on Windows (Chrome 48, Windows 10) but not OSX (Chrome 48, Yosemite or El Capitan). I guess this must be a bug in OSX. – MikeeBee Feb 03 '16 at 22:19
  • @MikeeBee - there's no reason it shouldn't work the same in Chrome on OSX as it does in Windows? I added a javascript version as well. – adeneo Feb 04 '16 at 00:03
  • I know, I'm pretty puzzled why it's not working! Shame to have to resort to JS for something like this. Thanks so much for providing a JS version! Is it supposed to be making the first/initial option uppercase? It doesn't seem to be (Chrome, FF on OSX). Also, what would be the best approach to fire this for each select on a page? – MikeeBee Feb 04 '16 at 03:45