分享一个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这个自定义属性