JavaScript: Use the first Option of a Select as a Label

#tutorial #javascript #tips #codepen

Sometimes input or select elements are used in forms without <label> tag. When the user selects an option in the select menu, by default he sees only the label of the selected item.

Simple Example

<select>
    <option selected>CATEGORY</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

If you select the option "2" in the above example, only a 2 will be displayed in the select. Wouldn't it be cool if it said "CATEGORY: 2" instead?

So it would look like this but ONLY when you select an entry!

<select>
    <option>CATEGORY</option>
    <option selected>CATEGORY: 1</option>
    <option>2</option>
    <option>3</option>
</select>

How about simply writing the first option of the select menu as "label" in front of the option?

document.addEventListener('DOMContentLoaded',function(event){

    // Find all selects in the current DOM
    let selects = document.querySelectorAll('.inline-label');

    if(selects){
        selects.forEach(select => {
            let options = select.querySelectorAll('option');
            let firstOption = options[0];
            options.forEach(option => {
                // Set a data attribute for each option with the original label text for later
                option.setAttribute('data-original',option.innerHTML);
            });     
            select.addEventListener('change',function(event){
                // When the select has changed, do the magic and add the label prefix
                let selectedOption = select.querySelector('option[value="'+select.value+'"]');
                // But before, reset the options to make sure only the new selected option has a label
                resetOptions(options);
                selectedOption.innerHTML = firstOption.innerHTML +': '+ selectedOption.innerHTML;
            });
        });
    }

    let resetOptions = function(options){
        options.forEach(option => {
            // Set the inner HTML back to the original value stored in the data attribute
            option.innerHTML = option.getAttribute('data-original');
        });
    }

});

Here's the Code on codepen.io

Not perfect: Things to do

If an entry has already been selected and you open the menu again, but then do not select a new entry, the label disappears. For this case, a solution still needs to be integrated. Maybe you have an idea? Then don't hesitate to edit the CodePen and present your solution here!

NOTE: @crys_dev helped to fix it, see comments below!