EasyUI/TopJUI之如何动态改变下拉列表框ComboBox输入框的背景颜色
简单记录一下
前段时间接到客户需求:动态改变下拉列表框ComboBox输入框的背景颜色。
刚开始想的很简单在用户选择列表项的时候,判断一下列表框的value值添加相应的背景颜色就OK了,然而在实际操作的时候发现,怎么操作都没有效果,后来检查了一下html结构才知道原来操作的不是显示在页面上的元素,害我浪费了一些时间。
具体代码如下:
第一种:HTML
<div class="topjui-col-sm6"><label class="topjui-form-label">性别</label><div class="topjui-input-block"><input type="text" name="sex"data-toggle="topjui-combobox"data-options="data:[{value:1,text:'男'},{value:2,text:'女'}],onSelect: function(rec){ //在用户选择列表项的时候触发if(rec.value=='男'){this.nextSibling.children[1].style.background='#00FF00'}else{this.nextSibling.children[1].style.background='#FFFF00'}}"></div>
</div>
第二种:js
<input type="text" name="sex"data-toggle="topjui-combobox"data-options="data:[{value:1,text:'男'},{value:2,text:'女'}],onSelect: onSelect"><script>function onSelect(rec){if(rec.value=='1'){this.nextSibling.children[1].style.background='#00FF00'}else{this.nextSibling.children[1].style.background='#FFFF00'}}
</script>
我是根据用户选择列表项的value值进行判断,当然也可以根据text值进行判断,具体操作根据实际需求来,是不是特别简单呢。
上面两种方式显示效果都一样,具体如下:
效果展示
总结:了解topjui组件的内部结构,对症下药。
EasyUI中文网:http://www.jeasyui.cn
TopJUI前端框架:http://www.topjui.com
TopJUI交流社区:http://ask.topjui.com
EasyUI/TopJUI之如何动态改变下拉列表框ComboBox输入框的背景颜色相关推荐
- 改变jupyter notebook的主题背景颜色
改变jupyter notebook的主题背景颜色 安装jupter notebook的自定义主题 cd jupyter.exe文件路径 pip install --upgrade jupyterth ...
- 改变表格单元格的背景颜色
功能 : 改变表格单元格的背景颜色 作者 : zjly 修改时间 : 2007-04-11 电子邮件 : zjly4@163.com 参数 id ...
- android 动态改变button样式,Android 修改button颜色
之前觉得button颜色修改,直接修改background就行了,但是会引发一系列的问题.比如原来的波纹效果没有了,button的状态改变的时候(例如,被禁用了),button的颜色没有任何变化. 这 ...
- 改变Keil5所有窗口的背景颜色
在网上找了很多都没有找到如何更改Keil5左侧和下侧的背景颜色,后来根据一些提示找到了改背景的方法,在此分享给有需要的人. 首先,更换中间那块的背景颜色相信大家都会,不过我还是写一下,感觉更完整-(强 ...
- element etable表格改变某个单元格的背景颜色
// 改变某一列单元格背景颜色tableCellStyle({ row, column, rowIndex, columnIndex }) {console.log(row); // 基本都在这里面 ...
- 如何改变Visual Studio的桌布背景颜色(手把手保姆级教程)
改变VS的保护色 前言 一.打开并创建项目 二.找到更改地方并更改 总结 前言 当大家打开vs以后,发现背景颜色是白色的,看屏幕久了眼睛容易疲惫,所以,大家为何不改变个保护眼睛的绿色或者是神秘的黑色呢 ...
- 改变libreOffice的Calc的背景颜色
libreOffice的Calc中选择: 工具->选项->应用色彩 修改文字背景和文字颜色即可
- python tkinter 背景色改变不了_python - Tkinter背景颜色问题 - 堆栈内存溢出
我有一个脚本,其中包含Tkinter模块,我想每隔3分钟更改一次背景颜色,例如绿色3分钟,然后橙色,然后红色. 我有显示绿色的代码,但无法更改它. 当我在代码中创建函数时,会遇到一些不同的错误,包括& ...
- python怎么改变button的颜色_python – 改变Kivy中Button的背景颜色
我是Kivy的新手,无法指定Button的背景颜色.这是我的简单例子: # custombutton.py from kivy.app import App from kivy.uix.widget ...
最新文章
- 如何将qlv格式倚天屠龙记转换为MP4格式
- AFP溢出攻击模块afp/loginext
- Android 5.0及以上实现屏幕截图
- maven打jar包pom配置
- Angular Component UI单元测试的隔离策略
- [html] 写页面布局时你有考虑过分辨率因素吗?还要考虑哪些因素呢
- MySQL的两个存储引擎--MyISAM和InnoDB
- 机器学习Scikit-Learn安装
- Linux常用命令(二)——超详版
- 省会城市房价地图,这9座新星城市正在悄然崛起
- 关于DNF的多媒体包NPK文件的那些事儿(5)- IMG文件里的指向型索引项(指向帧)的深度与有向环检测
- python使用gps设备
- Windows10连接局域网打印机
- 北京邮电大学计算机考研资料汇总
- 如何查看Mac系统的位数
- C语言编译器之一,GCC编译器
- python transforms_5、Pytorch+MNIST:transforms#多图同显,调试工具
- 从语义网络到知识图谱
- 空间句法软件sDNA安装教程及加载到ArcGIS方法
- 检测网页是否打开开发者工具(检测F12)
热门文章
- CrapApi —— API接口管理系统部署
- 拉萨-香港-海口-丽江4日游攻略
- Linux多线程实现生产者消费者进程(Linux+window代码)
- maxim-MAX78000-windows10-wsl2-Ubuntu20.04-pyenv+pytorch+ai8x环境搭建
- Flink大数据实时计算系列-Flink的Keyed state的使用
- 搭建 GIT 服务器教程
- otp远程服务器,通过 Yubico OTP 进行双因素认证(服务端)
- apache atlas 2.0 详细安装手册
- 小福利,常见加密算法
- windows 安装openoffice