<select name="name" id="select" class="sec1"> <option class="opts" value="a">aaa</option> <option class="opts" value="b">bbb</option> <option class="opts" value="c">ccc</option> <option class="opts" value="d">ddd</option> </select>
.sec1{ color: red; } .sec2{ color: blue; } select .opts{ color: yellow; }
原生js
var oSelect = document.getElementById("select");
oSelect.onchange = function(ev) {
var target = ev.target;
if(target.value !== "a") {
target.classList.remove("sec1");
target.classList.add("sec2");
} else {
target.classList.add("sec1");
target.classList.remove("sec2");
}
}
用jquery写,会简单一点
$("#select").on('change',function(){ if($(this).val() !== "a" ) { $(this).addClass("sec2").removeClass("sec1"); } else { $(this).addClass("sec1").removeClass("sec2"); } })
判断当前选择的值是否是第一个