分享一个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这个自定义属性
分享一个option样式传递给select当前选中样式的更多相关文章
- 分享一个图片上传插件(TP5.0)
效果预览图: 该插件主要功能是:可预览裁剪图片和保存原图片,执行裁剪图片后会删除 裁剪的原图片目录,以便减少空间.一.下载附件 地址:https://pan.baidu.com/s/1bpxZhM3 ...
- select标签非空验证,第一个option value=""即可
select标签非空验证,第一个option value=""即可,否则不能验证
- Jmeter----A接口response中body的某一个参数传递给B接口request的body中使用(参数的传递)
示例:将接口"获取待办列表"response中body的id值传递给接口"删除待办"request的body中使用: 操作步骤如下: 第一步:给"获取 ...
- vue select二级城市联动及第二级默认选中第一个option值
当二级联动比如选择国家的时候,希望选中一个国家的时候后面城市默认选中第一个城市,则给国家的select加一个@change事件就可以了 <div class="inputLine&qu ...
- add() 方法用于向 <select> 添加一个 <option> 元素。
//add() 方法用于向 <select> 添加一个 <option> 元素. //new Option() 创建一个option标签 school.add(new Opti ...
- jquery获取select下拉框的前一个,后一个,第一个,最后一个option对象
$("select option:selected").next(); <select> <option value="1" selected ...
- C# PDF Page操作——设置页面切换按钮 C# 添加、读取Word脚注尾注 C#为什么不能像C/C++一样的支持函数只读传参 web 给大家分享一个好玩的东西,也许你那块就用的到
C# PDF Page操作——设置页面切换按钮 概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者 ...
- WPF-19:分享一个样式(左右滑动选中的checbox)
首先看下效果. 选中: 不选中 样式: <Style x:Key="CheckStyle" TargetType="{x:Type CheckBox}"& ...
- 分享一个SQLSERVER脚本(计算数据库中各个表的数据量和每行记录所占用空间)
分享一个SQLSERVER脚本(计算数据库中各个表的数据量和每行记录所占用空间) 很多时候我们都需要计算数据库中各个表的数据量和每行记录所占用空间 这里共享一个脚本 CREATE TABLE #tab ...
随机推荐
- [RxJS] Creation operator: of()
RxJS is a lot about the so-called "operators". We will learn most of the important operato ...
- VLV INDEX
Normally, when the Directory Server conducts a search, the server looks through the entire entry for ...
- Json格式的http请求
服务端PHP代码可以从这里下载:https://github.com/lornajane/PHP-Web-Services 1.使用volley实现: request要用JsonObjectReque ...
- textarea固定大小,不可拖动
写前端,经常很多小东西容易忽略忘记,今天写页面碰到设定一个输入框大小,死活记不起怎么固定,故找了一下度娘,其实添加一个css属性就好了: resize: none; 随笔记一下!
- Oracle 如何让别人能够连接到你的数据库
Oracle 初步 --Oracle的一些关键字 i和g只是版本的代号,指oracle运用的技术i代表Internet就是互联网技术g代表grid就是网格技术现在出的最新版是c就是cloud也就是云技 ...
- FileStream操作文件读写
FileStream fsRead = new FileStream(@"C:\Users\Administrator\Desktop\u.html",FileMode.OpenO ...
- (六)backbone - API学习 - Backbone路由
Backbone路由本质 Backbone路由分为两个大块,Router以及History用户在Router中定义相关规则,然后开启history.start进行路由监控,执行默认的回调所以,Rout ...
- jdbc 获取connection 对象的三种方式
获取数据库连接方法一:驱动实现类 //创建mysql的Driver对象 Driver driver=new com.mysql.jdbc.Driver(); //jdbc url 定位一个数据库: S ...
- [转]在Linux里设置环境变量的方法
在Linux里设置环境变量的方法(export PATH) 一般来说,配置交叉编译工具链的时候需要指定编译工具的路径,此时就需要设置环境变量.例如我的mips-linux-gcc编译器在“/opt/a ...
- 使用PyQt4写界面后台程序方法总结
使用PyQt4编写界面后台程序的方法总结 一.怎么建立多线程 界面程序如果有稍微耗时一点的任务如果不使用多线程就会界面卡死,所以大多数情况会使用到多线程.PyQt4自己有多线程的机制,可以派生多线程类 ...