JSFiddle - React, Tailwind, and code Playground

by manolenso

HTML

<div id="change" style="height:20px; width:100%; position: absolute; float:bottom; background-color:#000000">

<select name="bgcolor" id="bgcolor" onchange="colorDiv()">
    <option class="1" value=1>Annulé</option>
    <option class="2" value=2>Reçue</option>
    <option class="3" value=3>Fait</option>
    <option class="4" value=4>Cian</option>
    <option class="5" value=5>Fait</option>
</select>
</div>

<p id="demo"></p>

JavaScript

function colorDiv() {
    var selection = document.getElementById('bgcolor').value;
    var div = document.getElementById('change');
    div.style.backgroundColor = 'green';

    document.getElementById("demo").innerHTML = selection;

    switch (selection) {
        case "1":
            div.style.backgroundColor = 'lightgrey';
            break;
        case "2":
            div.style.backgroundColor = 'lightgreen';
            break;
        case "3":
            div.style.backgroundColor = 'blue';
            break;
        case "4":
            div.style.backgroundColor = 'cyan';
            break;
        case "5":
            div.style.backgroundColor = 'lightgreen';
            break;
    }
}