基于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="x"             data-toggle="topjui-comb大专本科obox"             data-options="data:[{value:1,text:'男'},{value:2,text:'女'}],             onlect: function(rec){  //在用户选择列表项的时候触发                if(rec.value=='男'){                    this.nextsibling.children[1].style.background='#00ff00'                 }                 el{                      this.nextsibling.children[1].style.background='#ffff00'                 }             }">     </div></div>

第二种：js

<input type="text" name="x"   data-toggle="topjui-combobox"   data-optio读书让生活更美好ns="data:[{value:1,text:'男'},{value:2,text:'女'}],   onlect: onlect">   <script>   function onlect(rec){       if(rec.value=='1'){           this.nextsibling.children[1].style.background='#00ff00'       }       el{           this.nextsibling.children[1].style.background='#ffff00'       }   }</script>

我是根据用户选择列表项的value值进行判断，当然也可以根据text值进行判断，具体操作根据实际需求来，是不是特别简单呢。

上面两种方式显示效果都一样，具体如下：

效果展示

总结：了解topjui组件的内部结构，对症下药。

topjui前端框架：

topjui交流社区：