分享一个option样式传递给select当前选中样式

时间:2023-03-08 17:57:06
分享一个option样式传递给select当前选中样式

今天遇到一个很是纠结的问题,需求又改了!原生的select给option加样式,结果发现select选中仍是默认样式,如下图:

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQIAAAAtCAIAAADKoPJQAAAEGklEQVR4nO2csW6rMBSG+2a8DWuWLBm69A06ZOmSlTfIyNTlKiKgRoKBDEREHSJFdqpKVj34DlV7c8HHHEhIWvJ/QyXsg31Oc/4cQ8B3BoCb5+7aDgBwfSADACADACADAAxkAICBDAAwkAEAhikDpZSUsiiKJEkWAPxskiQpikJKqZQ6jwy01nmep2lalqWUUmvNHBeAa6G1llKWZZmmaZ7nnKR1yUBKGUXRfr8/n4cAXJT9fh9FkZTSbUbKQAixWq34ZQWAn4lSarVavb29OWzsMtBaR1GEJRAYBkopdz7bZZDnOdZCYEjsdrs8z6leiwyUUmma9ukSAFcgTVNqkW+RgRCiLMueXQLg0pRlKYSwdllk8HnPlT+67/utbCh7zjjdjE+BOZH/heOsbj5fLNLB8/nbl7XLIoMkSVpdHPchA79GN8vKWW46REed65YB3+dGBwAfrXWSJNYuiwwWi4V7uA75xJTB9+nuvHe79x/vy+n9LCOmc7vBj5EjA35E7KnXwcP0zzsVObBA5XZHGXAOqU+60YAzJk8MHy9P48dne6ZwRmBKjp/0p8ReP/xYTkdUeMBGXzJwZ4D7U3fktPvb13qKhU0wmQQbRhQcA4c9RwaVQNyxsw83wWRkL3a3h+d5d0d4nle3OacMjnEnE1MGppYo/OLgWDZks9E4WFPjXFIG1OyNZo2Hr/N7f7qkHLspwjA8lkEYhnWbXmTAT1lOBjDXCdbiYBtwHYz9pxfuFPXRGmVAidCqSerfUjGjLEk3stmoGuXt8l0QrKXA9CED9zd9paWDDBzJxJLBx/Ojfz9/5U5B+ezI7Maouxm0k8Fu/uA/zHcGmKOCYC0F5uwysH6BObKznn/10Y6TrK4xt9gsja/z+yYZUKFZDSh7a5cjwMbBrcKjRbic1sK8ZTzPo0qB6eMSmZ8lpmX+mVoucuaqNjKqgcNh5qRUF2dwpt5QDVoRhiFVCswZZUB9eNYWa1crGfAnqjWug3H16rEPGfCcsRs4qih3qGw2wr0iNn1dG3TIFbcN9bdxlnrjZe4U8WVQX/J1cKMC7hS1ooUM4jjmPExhW6eS7UwZHJcaxynczNsEk9HshbBhrlvcC3SmNqhwTq4Gm2Ay+V/pgERrHcextav7o3UnplEln0xTjrpVQWjy38+sbZ1hBnhKVyUipqKOwa/IrWj3aN2gHrSmnyn6/ayDCUTQgnYPWiulsmygmQNumCzLWrx2Y/ASJhgcrV/CNF+v5GNbCjAMOr6Sb7BBCxgK3Tdo+UQIge26wK9mt9tFUeTWgGFu3phl2Xa7PRwO2LkI/Hy01ofDYbvdZll2hs0bv1FKCSGKoojj+LK7sgLQmjiOi6IQQpxtK18AbgHIAADIAADIAAADGQBgIAMADGQAgDHmLx1gxhEKFh+gAAAAAElFTkSuQmCC" alt="" />

aaarticlea/png;base64,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" alt="" />

左思右想之后,感觉模拟一个实在太麻烦了(原来页面结构得变动、样式也得重写甚至要多写好多js和css代码,总之感觉因为这么个小需求去做大改动不(ai)值(tou)得(lan))!

...经过一番思想上的斗争与逻辑的整理,效果实现了:

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQUAAAAzCAIAAAARoIrCAAAEQklEQVR4nO2cPY7bPBCGdYscI2VKlVtumWOk/I7gco+wZcocQaWbhVYCDEiFAEGAjBQGDNJbmACL+YrNmo7En6Fs2Rv7fWAYkDQkh/a8HMqimRAA4IPk2g4A8ImAHgAwQA8AGKAHAAzQAwAG6AEAA/QAgAF6AMAAPQBgYOlBKSWl7LquLMsXAD43ZVl2XSelVEqdWQ9a66Zpqqrq+15KqbWObQCAC6O1llL2fV9VVdM0UUHr04OUMs/z7XZ7socAXIftdpvnuZSSae/UgxBitVpNyDgAfCqUUqvV6u3tjWNs14PWOs9zzI7AbaCUYsazXQ9N02CaBG6JzWbTNE3QzKIHpVRVVTO4BMA1qaoqOP+36EEI0ff9PC4BcDX6vhdC+G0senj/7TainYTxEOPYxmXPqWea8SkwG0qSPy9PqWk+X6ynt877MzS/jeWzLssy7k56Dj0cwmsQZ7GWg1L+V9ArT52cUsdqYfocdACw0VqXZem3sXzWLy8vgYonBBZTD4fifgHw2S/p8cnZnN8Nfh85euD3iNt0S9//o729E8BKMLan6oFz6PrKgwacOlmq2NMipcwRMrFpLcosyn9m38eHywX9yFgeAiK6hB78oeD/+j3BHcw5nEhtn+nh2Xk1WEMwCXgueYb8gUFUJhketvTwjV6dft0VaZomR6RpOraZRw9/VcCb+3JEwpwvDWrwzCievtJz66znknpwtR40Cx7+fKTF0unYPZFl2bEesiwb28ysB37sckKBOYWwpgtLhS2lX4ZjJ18PzJsEzsvTI2sCjNLD6xN9Wfg6ck8cUoQ1OdC8euBMhekEPXiiiqOHfUbJI/1mN+Hy2RPirqbHZ6IMovTw+xcl34fdvFcOKcKaHGhGPViHNE+Y+gf4cbSNxRYc2oeB8jOsByv+Ed1fxHWGmS7GxmE1Li3dvGPSNHUlB5r3fpofLhQZiDQKSk5bE/KDnzPqwVqEKTzkhxiyLHMlB5pFD65v0XrGeilKD/yGhidbShNaum3OpQeWMw4DT15lVvX6RF8dD1jAiPnvHyYEjd/G9R5sZXzyMr8v8fUwng1OcGMAfl+KYYoeiqJgrdew3lm6zjP1cJx8+LeYrpPt83DsjA3E4CSeKRJXd07NDy09PFDrKw0OaK2LovDbWD5r7nq+E+NpfHfInyNZo83iz54W3/48n451htnBUy4NehSVf97B8+kYJq7nu6n13p71S/88LT3+wPolPhPXeyul6rqexyUArkZd11P+D0T4vyi4Oab/X5Q+9hPA5hrgNjh1PwHCfjPgVjjDfjPvCCGwHxn4p9lsNnmeM8VAfj3Qx36VdV2v1+vdbocdmcDnR2u92+3W63Vd1+fcr/KAUkoI0XVdURSX3ZoWgGiKoui6Tghx/v2MAbgroAcADNADAAboAQAD9ACAAXoAwAA9AGCAHgAwQA8AGKAHAAzQAwCG/wE0kE+q1a13NwAAAABJRU5ErkJggg==" alt="" />

aaarticlea/png;base64,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" alt="" />

直接上代码:

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