JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<p></p>
<select onchange="updateProductsTitle()">
    <option value=""></option>
    <option value="Volvo">Volvo</option>
    <option value="Saab">Saab</option>
    <option value="Opel">Opel</option>
    <option value="Audi">Audi</option>
</select>
<select onchange="updateProductsTitle()">
    <option value=""></option>
    <option value="Volvo">Volvo</option>
    <option value="Saab">Saab</option>
    <option value="Opel">Opel</option>
    <option value="Audi">Audi</option>
</select>
<select onchange="updateProductsTitle()">
    <option value=""></option>
    <option value="Volvo">Volvo</option>
    <option value="Saab">Saab</option>
    <option value="Opel">Opel</option>
    <option value="Audi">Audi</option>
</select>
<select onchange="updateProductsTitle()">
    <option value=""></option>
    <option value="Volvo">Volvo</option>
    <option value="Saab">Saab</option>
    <option value="Opel">Opel</option>
    <option value="Audi">Audi</option>
</select>
<select onchange="updateProductsTitle()">
    <option value=""></option>
    <option value="Volvo">Volvo</option>
    <option value="Saab">Saab</option>
    <option value="Opel">Opel</option>
    <option value="Audi">Audi</option>
</select>

JavaScript

function addPunctuationToList (items) {
    return items.length > 2 ? items.slice(0,-1).join(', ') + ' & ' + items.slice(-1) : items.join(' & ');
}
                 
function updateProductsTitle () {
    var items = [];
    
    var selects = document.querySelectorAll('select');
    for (var i = 0; i < selects.length; i++) {
        if (selects[i].value) items.push(selects[i].value);
    }

    document.querySelector('p').innerHTML = addPunctuationToList(items) || 'No Products Selected';
}

updateProductsTitle();