Javascript:如果选择了选项，则更改选择背景颜色

Question

我正在寻找一个 Javascript 函数，如果选择了一个选项，它会更改我的选择字段的背景颜色。

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 不工作，此时只是为了测试我只设置了一个选择:

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

我假设您想远离 jQuery。

你错过了一些东西。首先，当用户CHANGES 选择时调用您的 if 语句没有什么。添加事件 .onchange 到 classNumber 以及 background 到 backgroundcolor。

像这样。

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";
    };
}