DEV Community

Cover image for JavaScript: Use the first Option of a Select as a Label
Simon Köhler
Simon Köhler

Posted on Edited on

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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');
        });
    }

});
Enter fullscreen mode Exit fullscreen mode

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!

You might be interested in this...

Support my work:
► https://www.paypal.com/paypalme/typo3freelancer
► https://www.patreon.com/koehlersimon

Follow me:
► https://github.com/koehlersimon
► https://www.linkedin.com/in/koehlersimon/
► https://bitbucket.org/typo3freelancer/
► https://twitter.com/koehlersimon
► https://www.instagram.com/fullstackfreelancer/

Your TYPO3 Developer & Freelancer - let's start a great TYPO3 project together!
→ https://simonkoehler.com/

TYPO3 Slug Editor for SEO Gurus:
→ https://extensions.typo3.org/extension/slug

TYPO3 Timeline Extension for frontend timelines:
→ https://extensions.typo3.org/extension/ce_timeline

TYPO3 Font Awesome Extension for awesome icons:
→ https://extensions.typo3.org/extension/faicon

Top comments (2)

Collapse
 
crys_dev profile image
Vincent Rouilhac •

Nice post ! To solve your issue I just put the event listener that calls resetOptions to not call it so the value is not reset when you click again.

Collapse
 
typo3freelancer profile image
Simon Köhler •

You are right, somehow this one was not really needed. Well I did this whole thing in 15 minutes or so ;-) Thank you buddy I have changed the code!