欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于EasyUI的TopJUI前端框架之如何动态改变下拉列表框ComboBox输入框的背景颜色

程序员文章站 2022-04-18 09:44:53
简单记录一下 前段时间接到客户需求:动态改变下拉列表框ComboBox输入框的背景颜色。 刚开始想的很简单在用户选择列表项的时候,判断一下列表框的value值添加相应的背景颜色就OK了,然而在实际操作的时候发现,怎么操作都没有效果,后来检查了一下html结构才知道原来操作的不是显示在页面上的元素,害 ......

简单记录一下

前段时间接到客户需求:动态改变下拉列表框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值进行判断,具体操作根据实际需求来,是不是特别简单呢。

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

        效果展示

         基于EasyUI的TopJUI前端框架之如何动态改变下拉列表框ComboBox输入框的背景颜色

基于EasyUI的TopJUI前端框架之如何动态改变下拉列表框ComboBox输入框的背景颜色

 

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

 

           topjui前端框架:

           topjui交流社区: