修改select提示文字颜色

Posted 2020-10-09 javenLee

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

 判断当前选择的值是否是第一个