效果图：

图标

（函数($){ //初始化清除按钮函数initClear(target){ var jq=$(target)；var opts=jq.data('combo ').选项；var combo=jq.data('combo ').组合；var箭头=组合。查找(' span。组合箭头')；var clear=箭头。姐弟(' span。combo-clear’)；if(clear.size()==0){ //创建清除按钮clear=$(' span class=' combo-clear ' style=' height : 20px；/span’)；//清除按钮添加悬停效果。安全了。解除绑定('鼠标输入。组合鼠标离开。组合').绑定('鼠标输入。组合鼠标离开。' combo '，函数(事件){ var isEnter=event。type=='鼠标输入'；清除[isEnter？add CLaSS ' : ' remove CLaSS '](' combo-clear-hover ')；} );//清除按钮添加点击事件，清除当前选中值及隐藏选择面板clear.unbind('click.combo ')。bind('click.combo '，function(){ jq.combo('setValue '，' ').组合(' setText '，' ')；jq。组合(' HidePanel ')；});arrow.before(清除);};var输入=组合。find('输入。组合文本')；输入。outwidth(输入。out width()-清除。out width())；opts.initClear=true//已进行清除按钮初始化。 } //扩展易用户组合添加清除当前值var oldResize=$。fn。组合。方法。调整大小；$.extend($.fn.combo.methods，{ initClear : function(jq){ return jq。每个(函数(){ initClear(this))；});}，resize:function(jq){ //调用默认组合调整大小方法var returnValue=oldResize.apply(此，参数);var opts=jq.data('combo ').选项；if(opts。initClear){ jq。combo(' initClear '，jq)；}返回返回值；} });}(jQuery))；超文本标记语言代码

选择id=' my select '面板高度=' auto '样式=' width : 102 px'可编辑='true '名称='itcast '选项值='0 '成都/option选项值='1 '传智播客/option选项值='2 '姚欣/option选项值='3 '小星星/option/selectjs代码

$('#myselect ').组合框({ 0必选：真的，可编辑： false}).combobox(' InitClear ')；钢性铸铁样式。combo-clear {底色： # E0ECFF宽度： 18px高度： 20像素飞越：隐藏；显示器：内联块；垂直对齐： 顶部；光标：指针；opa city 3360 0.6 filter : alpha(不透明度=60);背景： URL(' images/combo _ clear。png ')无重复居中；}.combo-clear-hover { opa city 3360 1.0；filter: alpha(不透明度=100);背景-color : # eaf2ff；}以上这篇jQuery易用户界面为组合框添加清除值功能的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。