分享一个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 ...
随机推荐
- 标准爬虫初探,来自Python之父的大餐!
首先不得不承认自己做了标题党.本文实质是分析500lines or less的crawlproject,这个project的地址是https://github.com/aosabook/500line ...
- .NET2.0下的对象生成JSON数据
前言:今天研究了下在.NET2.0环境下开发Ajax程序经常用到的一个数据类型JSON, 一.什么是JSON? 自己也写不了句子不是很专业,下面是百度百科的关于JSON的介绍: JSON(JavaSc ...
- 简易浏览器App webview
使用 public class MainActivity extends Activity { @Override protected void onCreate(Bundle sav ...
- Unable to find manifest signing certificate in the certificate(Visual studio)
今天打开之前做的项目,突然得到很奇怪的编译错误: Unable to find manifest signing certificate in the certificate 网上搜一下,有两个方法, ...
- java 线程池的用法
1.java自带的类ExecutorService用于提供线程池服务,可以一下方法初始化线程池: ExecutorService pool = Executors.newFixedThreadPool ...
- Objective-C中的copy协议
NSObject对象是否可以copy自己 NSObject类没有实现NSCopying或者NSMutableCopying协议,但是却有copy以及mutableCopy实例方法.然而,如果用NSOb ...
- POJ1840 hash
POJ1840 问题重述: 给定系数a1,a2, ..,a5,求满足a1 * x1 ^ 3 + a2 * x2 ^ 3 +... + a5 * x5 ^ 3 = 0的 xi 的组数.其中ai, xi都 ...
- POJ2151 动态规划
#include <iostream> #include <cstring> #include <cstdio> using namespace std; int ...
- Symfony2中的设计模式——装饰者模式
装饰者模式的定义 文章链接:http://www.hcoding.com/?p=101 个人站点:http://www.hcoding.com/ 在不必改变原类文件和使用继承的情况下,动态地扩展一个 ...
- JavaWeb学习笔记--跳转方法小结
服务端跳转:1. RequestDispatcher.forward() public void doGet(HttpServletRequest request, HttpServletRespo ...