easyui实现下拉框添加图片或图标

html

<div class="fitem">
            <label>图标:</label>

                <input id="icon-box" class="easyui-combobox" name="icon" style="width:100px;" />
        </div>

js

$.ajax({
                     url:"<%=request.getContextPath() %>/menu.html?act=icon",
                     data:{},
                     method:"get",
                     success: function (data) {
                            var datas=[];
                            data.list.forEach((item,index)=>{
                            var index=item.lastIndexOf(".");
                            var text=item.substring(0,index);
                            datas.push({
                                 "icon": item, "id": index,"text":text,"selected":false
                            })
                        })


                         $("#icon-box").combobox({
                                //绑定数据
                                valueField: 'id',
                                textField: 'text',
                                //数据展示
                                formatter: function(row){
                                    var img="/easyui/css/themes/icons/"+row.icon;
                                    return '<img class="item-img" src="'+img+'"/><span class="item-text">'+row.text+'</span>'
                                },
                                //往下拉框中填充数据、可以是后端请求，也可以是上面这种形式
                                loader: function(param,success,error){
                                    success(datas);
                                },
                                //添加点击事件
                                onSelect: function(record){
                                    alert(record.text);
                                }
                            })



                     }
               })

url是后端请求图标文件的接口，相信聪明的你一看就明白了。