JavaScript: Use the first Option of a Select as a Label
Tags: tutorial, javascript, tips, codepen
Published: 2021-03-16 15:57:50

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
``` html
<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!

``` html
<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?

``` JavaScript
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

{% codepen https://codepen.io/typo3-freelancer/pen/dyOLWjE %}

## 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