原生js生成時間選擇下拉框，兼容ie8

　　前兩天的項目中要使用時間選擇下拉框，而兼容ie8的插件沒找到。后來，只好自己寫，在使用動態生成select框時，IE8下面出現了兼容性問題，下拉框不顯示。今天，想到不用select框，改用div+ul+li的形式生成。

先上效果：

下面是代碼，初學者，各位將就着看哈。

<div style="width:100px;height:20px;">
    <input type="text" placeholder="請選擇" onclick="addCombo();" style="width:80px;text-align: center;" id="inputTime">
    <div style="width:85px;height:120px;overflow-y: scroll;z-index: 2;position:absolute;display: none;" id="combo"><ul id="list"></ul></div>
</div>

js部分：

<script type="text/javascript">
    var inputTime=document.getElementById('inputTime');
    var flag=true;
    var combo=document.getElementById('combo');
    var oUl=document.getElementById("list");
    function addCombo(){
        var comboVal=[];
        if (combo.style.display == "none") {
            combo.style.display = "";
            var hh= 0, valH="";
            for(var h=0;h<24;h++){
                hh++;
                if(hh<10){
                    valH="0"+hh;
                }else if(hh>=24){
                    valH="00";
                }else {valH=hh;}
                var valM="",mm= 0;
                for(var m= 0;m<4;m++){
                    mm=mm+15;
                    if(mm>=60){
                        valM="00";
                    }else{ valM=mm;}
                    var inputV=valH+":"+valM+":00";
                    comboVal.push(inputV);
                }
            }
            for(var i=0;i<comboVal.length;i++){
                var liDom=document.createElement('li');
                liDom.innerHTML=comboVal[i];
                oUl.appendChild(liDom);
            }
        }
        else{
            combo.style.display = "none";
        }
    }
    var eventUtil={
        addEventHandler:function(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent("on"+type,handler);
            }else{
                element["on"+type]=handler;
            }
        },
        removeEventHandler:function(element,type,handler){
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
            }else if(element.detachEvent){
                element.detachEvent("on"+type,handler);
            }else{
                element["on"+type]=handler;
            }
        },
        getTarget:function(event){//獲取事件源
            if(event.target){
                return event.target;
            }else{
                return event.srcElement;
            }
        },
        stopPropagation:function(event){//阻止事件冒泡
            if(event.stopPropagetion){
                event.stopPropagation();
            }else{
                event.cancelBubble=true;
            }
        },
        stopDefault:function(event){//阻止事件默認行為
            if(event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue=false;
            }
        }
    }
    var arrLI=oUl.getElementsByTagName("li");
    eventUtil.addEventHandler(oUl,"mouseover",function(e){
        var target=eventUtil.getTarget(e);
        if(target.tagName.toLowerCase()=="li"){//判斷事件源
            target.style.background = "#d3d3d3";
            for(var c= 0,len=arrLI.length;c<len;c++){
                arrLI[c].onclick=(function(c){
                    return function(){
                        inputTime.value=arrLI[c].innerText;
                    }
                })(c)
            }
        }
    })
    eventUtil.addEventHandler(oUl,"mouseout",function(e){
        var target=eventUtil.getTarget(e);
        if(target.tagName.toLowerCase()=="li"){
            target.style.background = "";
        }
    })
</script>

歡迎討論。