Change the chosen item to uppercase within a dropdown menu using pure vanilla JavaScript

Question

Change the chosen item to uppercase within a dropdown menu using pure vanilla JavaScript

I am trying to achieve a specific effect where the text is uppercase only on the selected option within a <select> element. I came across a solution using jQuery in this article, but I need to convert it to plain JavaScript (vanilla JS).

I have made progress and managed to make the selected value uppercase when an option is chosen. However, the issue arises when selecting another option as the previous one remains uppercase too.

I am struggling with changing the logic to "Capitalise all options EXCEPT the selected option, which I would like to be uppercase".

Any help or advice on how to achieve this would be greatly appreciated.

You can view my current progress in this working Fiddle: Here is a working Fiddle of where I am so far.

javascript css

Answer 1

Answer №1

Have you considered leveraging CSS for this?

* {
  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>

An alternative in JavaScript is provided below:

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

Answer 2

Have you considered leveraging CSS for this?

* {
  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>

An alternative in JavaScript is provided below:

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

Change the chosen item to uppercase within a dropdown menu using pure vanilla JavaScript

Answer №1

Similar questions

Prevent closure of Bootstrap offcanvas on backdrop click in a Blazor .NET application

Generating a fresh array by filtering out elements with specific properties using the .map() method

When attempting to print a Bootstrap 4 HTML page in Chrome, the browser headers and footers are being clipped

The operation of assigning the value to the property 'baseUrl' of an undefined object cannot be executed

Tips for assigning a unique identifier to an HTML tag using JavaScript

Mastering the art of Promises and handling errors

Display a single unique value in the dropdown menu when there are duplicate options

Exploring the possibilities of retrieving Cognitive data from Lambda events using Node.js and Typescript

how do I modify my JavaScript code to achieve the desired outcome

What are your strategies for designing a website specifically for mobile users?

The premature reveal of the back side in the Kendo UI flip effect on Internet Explorer

Vue: Clear the current form selection with a button click

Elements are receiving CSS properties from other elements within the same component

Does Typescript not provide typecasting for webviews?

Send a request to templateUrl

The websocket connection to the production host has encountered issues, while it operates smoothly on localhost within Django

Retrieving data from router in Angular

Google-play-scraper encounters an unhandled promise rejection

Prevent the box from closing automatically after submitting a form using jQuery

Having trouble making the JavaScript mouseenter function work properly?