简单记录一下
前段时间接到客户需求:动态改变下拉列表框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中文网:
TopJUI前端框架:
TopJUI交流社区: