<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"); } })
判断当前选择的值是否是第一个