自己封装的一个模拟下拉列表的插件

simSelect”下拉列表

简述：

通过使用simSelect可以实现由传统HTML模拟类似于原生select标签的功能。

主要是解决select标签样式在不同浏览器中的兼容性问题。

通过模拟，使用者便可以完全自定义下拉列表的样式。

该工具主要有以下几种功能：

• 结合表单提交，使用者可以自定义表单控件的name值。
• 可以适用于多级联动的情况。
• 支持带参数的回调功能。

结构：

　　通过使用simSelect，可以在指定的dom对象内生成一个模拟的结构，这个模拟的HTML结构详细内容如下：

　　dom

　　　　|- em 　　　　　　-> 用于显示使用者选中的结果。

　　　　|- span 　　　　    -> 下来列表的三角形箭头。

　　　　|- input:hidden     -> 结合表单提交的表单控件。

　　　　|-ul 　　　　　　    -> 用于展示生成的下拉列表选项。

　　　　　　|- li 　　　　    -> 每一个下来列表选项。

具体代码：

;(function(root){

    var UlBox = [];   // 定义一个堆栈，压入所有的UL。
    function hideUl(){    //对着整个文档单击或右击时的处理函数。
        for(var i=0;i<UlBox.length;i++){   //循环所有的UL，来进行关闭
            UlBox[i].style.display="none";
            UlBox[i].flag = true;
        }
    }

    document.onclick=hideUl;
    document.oncontextmenu=hideUl;

    function simSelect(param){

        this.oBox = param.dom || null;
        this.data = (param.data)?param.data:[];
        this.fn = param.fn || null;
        this.name = param.name || '';
        this.config = [];
        this.oBox && this.init();
        this.oBox && this.core();

    }

    simSelect.prototype.init=function(){

        var a = [];

        this.ul = document.createElement('ul');
        this.cnt = document.createElement('em');
        this.mark = document.createElement('span');    
        this.inp = document.createElement('input');
        this.inp.type="hidden";
        this.inp.name = this.name;

        this.oBox.innerHTML="";

        
        a.push('<li>请选择</li>');

        if(this.data && this.data.length){
            for(var i in this.data){
                for(var j in this.data[i]){
                    this.config.push(j);
                }
                break;
            }


            for(var i = 0,l = (this.data && this.data.length)?this.data.length : 0;i<l;i++){
                a.push('<li value="'+ this.data[i][this.config[1]] +'">'+ this.data[i][this.config[0]] + '</li>');
            }

        }

        this.ul.innerHTML = a.join('');
        this.ul.style.display = 'none';
        this.cnt.innerHTML = "请选择";
        this.mark.innerHTML = '▼'


        this.oBox.appendChild(this.cnt);
        this.oBox.appendChild(this.mark);
        this.oBox.appendChild(this.inp);
        this.oBox.appendChild(this.ul);

        UlBox.push(this.ul);
        this.oLi = this.ul.getElementsByTagName('li');
 
    };


    simSelect.prototype.core=function(){

        var _this = this;

        this.ul.flag = true;
        function hide(__this){    //单击下拉列表选项时候的处理函数。
            _this.ul.style.display="none";
            _this.cnt.innerHTML = __this.innerHTML;
            _this.inp.value = __this.getAttribute(_this.config[1]) ||  null;
            _this.ul.flag=true;
            _this.fn &&  _this.fn(_this.inp.value,__this,_this.oLi,_this.ul,_this.oBox);
        }

        function hideAndShow(){    //单击内容框或者三角形按钮时候的处理函数。
            
            return function(event){
                var event = event || window.event;
                if(_this.ul.flag){
                    _this.ul.style.display="block";
                    _this.ul.flag=false;
                }else{
                    _this.ul.style.display="none";
                    _this.ul.flag=true;
                }

                for(var i=0;i<UlBox.length;i++){
                    if(_this.ul != UlBox[i]){
                        UlBox[i].style.display="none";
                        UlBox[i].flag = true;
                    }
                }

                if(document.addEventListener){
                    event.stopPropagation();
                    event.preventDefault();
                }else{
                    event.cancelBubble = true;
                    event.returnValue = false;
                }
            }

        }

        for(var i=0;i<this.oLi.length;i++){

            this.oLi[i].index = i;
            this.oLi[i].onclick=function(){
                hide(this);
            };
            this.oLi[i].onmouseover=function(){
                this.className = 'hover';
            };
            this.oLi[i].onmouseout=function(){
                this.className = '';
            };
            this.oLi[i].oncontextmenu=function(event){
                var event = event || window.event,
                    oTarget = event.srcElement ? event.srcElement : event.target;
                    hide(this);
                    return false;
            };

        }
        this.cnt.onclick=hideAndShow();
        this.mark.onclick=hideAndShow();
    };

    root.simSelect=function(p){
        new simSelect(p);
    };

})(window)

调用方式如下：

simSelect({
    'dom':document.getElementById('select'),
    'data':data,
    'name':'dq'
});
/*
    |-- dom [object]        ：指定生成下拉列表组件的dom对象。
    |-- name[string]            ：设置表单控件的name属性值。
    |-- data [object]        ：生成下拉列表选项的数据。
    |-- fn[function]        ：选择下来列表后的回调函数。
*/

示例：联动生成：

var data =[
    {'key':'安徽','value':'ah'},
    {'key':'浙江','value':'zj'},
    {'key':'江苏','value':'js'}
];    
var data2 =[
    {'name':'六安','value':'la'},
    {'name':'合肥','value':'hf'},
    {'name':'安庆','value':'aq'}
];
simSelect({
    'dom':document.getElementById('select'),
    'data':data,
    'name':'dq',
    'fn':function(a){
        if(a == 'ah'){
            simSelect({
                'dom':document.getElementById('select1'),
                'data':data2,
                'name':'sx',
                'fn':function(b){
                    alert(b);
                }
            });
        }
    }
});