Javascript: Change select background-color if option is selected

Question

I'm searching a while for a Javascript function that changes the background-color of my select field if an option is selected.

HTML:

<select name="classNumber" id="classNumber">
 <option selected disabled value="0">Bitte Klasse auswählen</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
 <option value="9">9</option>
 <option value="10">10</option>
 <option value="11">11</option>
 <option value="12">12</option>
 <option value="13">13</option>
</select>
<select name="classSpecify" id="classSpecify">
 <option selected disabled value="0">Bitte Klasse spezifizieren</option>
 <option value="A">A</option>
 <option value="B">B</option>
 <option value="D">C</option>
 <option value="D">D</option>
 <option value="N">N (Naturwissenschaftliches Profil)</option>
 <option value="S">S (Sprachliches Profil)</option>
 <option value="G">G (Gesellschaftliches Profil)</option>
</select>

Javascript that is not working, at this time just for testing I set up just one select:

var classNumber = document.getElementById('classNumber');
var first = classNumber.options[classNumber.selectedIndex].value;
if (first != 0) {
    alert('Test');
    document.getElementById('classNumber').style.background="$green";
};

Answer 1

I'm assuming you want to stay away from jQuery.

You are missing a few things. First off there is nothing that calling your if statement when a user CHANGES the select. Add an event .onchange to classNumber as well as background to backgroundcolor.

Like so.

var classNumber = document.getElementById('classNumber');
classNumber.onchange = runBackgroundChange;

function runBackgroundChange(first){
    var value = first.srcElement.options[first.srcElement.selectedIndex].value;
    if (value != 0) {
        alert('Test');
        document.getElementById('classNumber').style.backgroundColor="green";
    } else {
        document.getElementById('classNumber').style.backgroundColor="initial";
    };
}

Answer 2

change this:

if (first != 0) {

to:

if (first !== 0) {

and this:

"$green"

to:

"green"

you want the comparison(==) operator.