JSFiddle - React, Tailwind, and code Playground

by Kleofáš Hatlapatka

HTML

<fieldset class="poleVyplnit">
                    <legend class="poleTitulek">
                        <p>
                            Index konstrukce a vybavení (I2)
                        </p>
                    </legend>
                    <div class="popisTS">Vyberte společné části domu (I2)</div>
                        <select name="spolecneCasti" id="spolecneCasti">
                            <option>Prosím vyberte ze seznamu</option>
                            <option>Jablko</option>
                            <option>Hruska</option>
                        </select>
                </fieldset>

CSS

.poleVyplnit{
    background-color: salmon;
    border:2px dotted black;
    color:black;
}
.poleTitulek{
    background-color: red;
    color:white;
}

.popisTS{
    
}

.highlight{
    color:black;
    background-color:PaleGreen;
}

JavaScript

$(document).ready(function(){
    $("*").bind("change", function(){
        var barvy = $("#spolecneCasti").find('option:selected').text();
        if  (barvy != "Prosím vyberte ze seznamu"){ 
            $(".poleVyplnit, .poleTitulek").addClass( "highlight" ); 
            alert("Vybral jste : " + barvy); 
            return false;
        } else {
            $(".poleVyplnit, highlight").removeClass("highlight");
            $(".poleTitulek, highlight").removeClass("highlight");
            alert("Musíte vybrat ze seznamu !");
            return false;            
        }
    });  // handler 
}); // JQ