分享一個option樣式傳遞給select當前選中樣式

       今天遇到一個很是糾結的問題，需求又改了！原生的select給option加樣式，結果發現select選中仍是默認樣式，如下圖：

      左思右想之后，感覺模擬一個實在太麻煩了（原來頁面結構得變動、樣式也得重寫甚至要多寫好多js和css代碼，總之感覺因為這么個小需求去做大改動不(ai)值(tou)得(lan)）!

...經過一番思想上的斗爭與邏輯的整理，效果實現了：

直接上代碼：

html:

<select name="" id="bankSelect" onChange="changSel()">
<option>中國銀行</option>
<option color="yelllow" style="color:#F00">農業銀行(正在升級中)</option>
<option>建設銀行</option>
</select

js:

<script type="text/javascript">
    function changSel(){
    $('#bankSelect option[color!="yelllow"]').css('color','#000'); //option沒有自定義屬性color="yelllow"默認為黑色
    if($("#bankSelect option:selected").text().indexOf("(")>=0 && $("#bankSelect option:selected").text().indexOf(")")>=0) //如果選中option中包含"("和")"給select加紅色
       {
    $('#bankSelect').css('color','red');
      }
    else{
    $('#bankSelect').css('color','#000');    //否則為默認的黑色
        }
        }
</script>

 

邏輯就是這樣的了 最好是直接判斷是否有color這個自定義屬性