下拉列表选择控件，用于替换原生的 select 控件

最新推荐文章于 2022-11-04 17:32:10 发布

ddk87869

最新推荐文章于 2022-11-04 17:32:10 发布

阅读量128

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ecalf/archive/2012/12/09/2810399.html

版权

本文介绍了一个使用jQuery实现的自定义下拉列表组件，该组件具有动态加载、选择项自定义显示及交互功能，包括鼠标悬停效果、点击选择事件、支持图标和文字混合显示等特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<style>
    body{     
        font: 12px "宋体",Arial; 
    } 
      
  
    /* list start*/
    .conditionBox{  
        position:relative;
        display:inline-block;
        *display: inline;
        *zoom:1;
        padding:0 20px 0 10px;
        margin:6px 0px 5px 5px;
        width:70px;
        height:22px;
        line-height:22px;

        background:url(http://images.cnblogs.com/cnblogs_com/ecalf/431722/o_button.gif) no-repeat 0 -97px;    
        cursor:pointer;
        color:#666;
    }
    .filterList{
        position:absolute;
        left:0;
        top:21px;
        display:none;
        border:1px solid #d2d2d2;
        background:#FFF;
        width:98px;
        min-height:30px;
        overflow:hidden;
    }
    .filterList, .filterList li { 
        margin: 0; padding: 0; list-style: none outside none; 
    }
    .filterList li{
        height:22px;
        line-height:22px;
        margin:0;
        padding:0 5px;
        float:none;
        width:88px;
        color:#333;
    }
    .filterList li:hover{
        color:#ffffff;
        background:#666666;
    }
    .filterList .selected{
        background:#888888;
        color:#ffffff;
    }
    /* list end*/
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function List(opstions){   
    this.container=null;
    this.dom=null;
    this.listSheet=null;
    this.locked = false;
    this.items=[];
    this.beforeCallbacks=[];
    this.afterCallbacks=[];

    this.init(opstions);
}
List.prototype={
    init:function(opstions){
        var host = this;
        for(var key in opstions){
            host[key] = opstions[key];
        }

        if(typeof(opstions.container)=="string"){
            host.container = document.getElementById(opstions.container);
        }
        
        host.dom = document.createElement("div");
        host.dom.className = "conditionBox";
        host.listSheet = document.createElement("ul");
        host.listSheet.className = "filterList";

        host.dom.appendChild(document.createElement("span"));
        host.dom.appendChild(host.listSheet);
        host.container.appendChild(host.dom);

        $(host.dom).hover(function(){
            $(this).children("ul").fadeIn(200);
        },function(){
            $(this).children("ul").fadeOut(200);
        });

        $(host.listSheet).delegate("li","click",function(e){            
            var itemId = $(this).attr("itemId");
            var stopSelected=false;
            $.each(host.beforeCallbacks||[],function(index,f){
                if(f.call(host)===false){
                    stopSelected=true;
                };
            });
            if(stopSelected){
                return host;
            }

            host.selectItem(itemId);

            $.each(host.afterCallbacks||[],function(index,f){
                f.call(host);
            });

        });

        return host;
    },
    setItems:function(arr){
        var host = this;
        host.items = arr;

        var listSheet = $(host.listSheet).empty();
        var defaultItem;
        $.each(arr,function(index,itemData){
            listSheet.append(host.createListItem(itemData));
            if(itemData.selected){
                    defaultItem = itemData;
            }
        });

        defaultItem && host.selectItem(defaultItem.itemId);        
        return host;
    },
    getItems:function(){
        var host=this;      
        return host.items;
    },
    createListItem:function(itemData){
        var host = this;
         var listItem = $('<li></li>');
            $.each(itemData,function(key,val){
                switch(key){
                    case 'icon':
                        listItem.prepend($('<img>').attr({src:val,height:16 ,width:16 ,border:"0px"})
                            .css({'margin':"1px 2px 1px 0px",'vertical-align':'middle'}));
                        break;                  
                    case 'caption':
                        listItem.append('<span>'+val+'</span>');
                        break;
                    default:
                        listItem.attr(key,val);
                        break;
                }
                if(!('caption' in itemData)){
                    listItem.text(itemData.value);
                }
                
            });

        return listItem;
    },
    insertItems:function(items,index){
        var host = this;
        var listSheet = $(host.listSheet);
        var lis =  listSheet.find("li");
        if(Object.prototype.toString.call(items)!="[object Array]"){
            items = [items];
        }
        index = parseInt(index);
        if(!lis.length||index<0){
            index = 0;
        }else if(isNaN(index)||index>lis.length-1){
            index = lis.length-1;
        }

        var baseItem = lis.eq(index);  
        $.each(items||[],function(i,itemData){
            baseItem.before(host.createListItem(itemData));
        });

        Array.prototype.splice.apply(host.items,[index,0].concat(items));
        return host;
    },   
    clearItems:function(){
        var host = this;
        host.items=[];
        $(this.dom).find("ul").empty();
        return host;
    },  
    removeItems:function(itemids){
        var host = this;
        var lis = $(this.dom).find("li");
        var idsHash={};
        if(Object.prototype.toString.call(itemids)!="[object Array]"){
            itemids = [itemids];
        }
        $.each(itemids,function(index,val){
            idsHash[val]=1;
        });
        $.each(lis,function(index,liItem){
            liItem = $(liItem);
            if(idsHash[liItem.attr("itemId")]){
                liItem.remove();
                host.items.splice(index,1);             
            }
        });
        return host;
    },
    getCurrentItem:function(){
        var host = this;
        var lis = $(this.dom).find("li");
        var item = {};
        $.each(lis,function(index,liItem){
            if($(liItem).hasClass('selected')){
                item = host.items[index];
                return false;
            }
        });
        return item;
    },
    selectItem:function(itemId){
        var host = this;        
        var listSheet = $(host.listSheet);
        var item = listSheet.find("li[itemId='"+itemId+"']");        
        item.attr("class","selected")
            .siblings(".selected").removeAttr("class");
        listSheet.hide().prev().html(item.html());
        host.value = item.attr("value");
        return host;
    },
    setValue:function(val){
        var host = this;
        host.value = val;
        var listSheet =  $(host.listSheet);
        var liItem = listSheet.find("li[value='"+val+"']");
        if(liItem.length){
            host.selectItem(liItem.eq(0).attr("itemId"));
        }else{
            listSheet.hide().prev().empty();
        }

        return host;
    },
    getValue:function(){
        var host = this;
        return host.value;
    },
    setBeforeCallback:function(f){//设置选择选操作前的回调函数，返回 false 将阻止选择操作
        var host = this;
        if(typeof(f)=="function"){
            host.beforeCallbacks.push(f);
        }        
        return host;
    },
    setAfterCallback:function(f){
        var host = this;
        if(typeof(f)=="function"){
            host.afterCallbacks.push(f);
        }    
        return host;
    }
}
  
$(document).ready(function(){
    var mylist = window.mylist = new List({container:'listBox',afterCallbacks:[function(){ console.log(this.value);}]})
    .setItems([
        {itemId:1,value:100,caption:'hat',icon:"http://images.cnblogs.com/cnblogs_com/ecalf/431722/o_13135493700855.gif"},
        {itemId:2,value:200,caption:'man',icon:"http://images.cnblogs.com/cnblogs_com/ecalf/431722/o_13188535899238.jpg",selected:true},
        {itemId:3,value:300,caption:'robot',icon:"http://images.cnblogs.com/cnblogs_com/ecalf/431722/o_13188536660394.gif"},
        {itemId:'x',value:400,caption:'bottle',icon:"http://images.cnblogs.com/cnblogs_com/ecalf/431722/o_13188536897653.gif"}
        ]); 
});
  
  
  
</script>
</head>
  
  
<body>  
<div id="listBox" style="border:1px solid black; width:500px; height:80px; padding:20px;">   
</div>
</body>
</html>