jQuery EasyUI 爲Combo,Combobox添加清除值功能

效果圖：

 

圖標

(function($){
    
    //初始化清除按鈕
    function initClear(target){
        var jq = $(target);
        var opts = jq.data('combo').options;
        var combo = jq.data('combo').combo;
        var arrow = combo.find('span.combo-arrow');
        
        var clear = arrow.siblings("span.combo-clear");
        if(clear.size()==0){
            //建立清除按鈕。
            clear = $('<span class="combo-clear" style="height: 20px;"></span>');
            
            //清除按鈕添加懸停效果。
            clear.unbind("mouseenter.combo mouseleave.combo").bind("mouseenter.combo mouseleave.combo",
                function(event){
                    var isEnter = event.type=="mouseenter";
                    clear[isEnter ? 'addClass' : 'removeClass']("combo-clear-hover");
                }
            );
            //清除按鈕添加點擊事件，清除當前選中值及隱藏選擇面板。
            clear.unbind("click.combo").bind("click.combo",function(){
                jq.combo("setValue","").combo("setText","");
                jq.combo('hidePanel');
            });
            arrow.before(clear);
        };
        var input = combo.find("input.combo-text");
        input.outerWidth(input.outerWidth()-clear.outerWidth());
        
        opts.initClear = true;//已進行清除按鈕初始化。
    }
    
    //擴展easyui combo添加清除當前值。
    var oldResize = $.fn.combo.methods.resize;
    $.extend($.fn.combo.methods,{
        initClear:function(jq){
            return jq.each(function(){
                 initClear(this);
            });
        },
        resize:function(jq){
            //調用默認combo resize方法。
            var returnValue = oldResize.apply(this,arguments);
            var opts = jq.data("combo").options;
            if(opts.initClear){
                jq.combo("initClear",jq);
            }
            return returnValue;
        }
    });
}(jQuery));

html代碼
<select id="myselect" panelHeight="auto" style="width: 102px;" editable="true" name="itcast">
        <option value="0">成都</option>
        <option value="1">傳智播客</option>
        <option value="2">姚欣</option>
        <option value="3">小星星</option>
</select>

js代碼
$('#myselect').combobox({
	required : true,
	editable : false
}).combobox("initClear");

css樣式
.combo-clear {
  background-color: #E0ECFF;
  width: 18px;
  height: 20px;
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  opacity: 0.6;
  filter: alpha(opacity=60);
  background: url('images/combo_clear.png') no-repeat center center;
}
.combo-clear-hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
  background-color: #eaf2ff;
}