基於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