/* diy_select */

.diy_select{height:30px;width:90px; position: relative;font-size:14px;margin:0px;background:#fff;color:#000;float:left; cursor:pointer;}

.diy_select_btn,.diy_select_txt{float:left;height:100%;line-height:30px}

.diy_select,.diy_select_list{border:0px solid #d8d8d8;}

.diy_select_txt{width:90px;background: url(../images/select_ico.png) no-repeat 70px 50% #fff;color:#666; }

.diy_select_txt,.diy_select_list li{text-indent:8px;overflow:hidden}

.diy_select_btn{width:28px;background:url(rec.gif) no-repeat center}

.diy_select_list{position:absolute;top:30px;left:0px;z-index:;border-top:none;width:100%;display:none;_top:29px;background:#fff;color:#333; }

.diy_select_list li{list-style:none;height:24px;line-height:24px;cursor:default;_background:#fff}

.diy_select_list li.focus{background:#257824;color:#fff}

<script type="text/javascript">

function diy_select(){this.init.apply(this,arguments)};

diy_select.prototype={

     init:function(opt)

     {

        this.setOpts(opt);

        this.o=this.getByClass(this.opt.TTContainer,document,'div');//容器

        this.b=this.getByClass(this.opt.TTDiy_select_btn);//按钮

        this.t=this.getByClass(this.opt.TTDiy_select_txt);//显示

        this.l=this.getByClass(this.opt.TTDiv_select_list);//列表容器

        this.ipt=this.getByClass(this.opt.TTDiy_select_input);//列表容器

        this.lengths=this.o.length;

        this.showSelect();

     },

     addClass:function(o,s)//添加class

     {

        o.className = o.className ? o.className+' '+s:s;

     },

     removeClass:function(o,st)//删除class

     {

        var reg=new RegExp('\\b'+st+'\\b');

        o.className=o.className ? o.className.replace(reg,''):'';

     },

     addEvent:function(o,t,fn)//注册事件

     {

        return o.addEventListener ? o.addEventListener(t,fn,false):o.attachEvent('on'+t,fn);

     },

     showSelect:function()//显示下拉框列表

     {

        var This=this;

        var iNow=0;

        this.addEvent(document,'click',function(){

             for(var i=0;i<This.lengths;i++)

             {

                This.l[i].style.display='none';

             }

        })

        for(var i=0;i<this.lengths;i++)

        {

            this.l[i].index=this.b[i].index=this.t[i].index=i;

            this.t[i].onclick=this.b[i].onclick=function(ev)

            {

                var e=window.event || ev;

                var index=this.index;

                This.item=This.l[index].getElementsByTagName('li');

                This.l[index].style.display= This.l[index].style.display=='block' ? 'none' :'block';

                for(var j=0;j<This.lengths;j++)

                {

                    if(j!=index)

                    {

                        This.l[j].style.display='none';

                    }

                }

                This.addClick(This.item);

                e.stopPropagation ? e.stopPropagation() : (e.cancelBubble=true); //阻止冒泡

            }

        }

     },

     addClick:function(o)//点击回调函数

     {

        if(o.length>0)

        {

            var This=this;

            for(var i=0;i<o.length;i++)

            {

                o[i].onmouseover=function()

                {

                    This.addClass(this,This.opt.TTFcous);

                }

                o[i].onmouseout=function()

                {

                    This.removeClass(this,This.opt.TTFcous);

                }

                o[i].onclick=function()

                {

                    var index=this.parentNode.index;//获得列表

                    This.t[index].innerHTML=This.ipt[index].value=this.innerHTML.replace(/^\s+/,'').replace(/\s+&/,'');

                    This.l[index].style.display='none';

                }

            }

        }

     },

     getByClass:function(s,p,t)//使用class获取元素

     {

        var reg=new RegExp('\\b'+s+'\\b');

        var aResult=[];

        var aElement=(p||document).getElementsByTagName(t || '*');

        for(var i=0;i<aElement.length;i++)

        {

            if(reg.test(aElement[i].className))

            {

                aResult.push(aElement[i])

            }

        }

        return aResult;

     },

     setOpts:function(opt) //以下参数可以不设置  //设置参数

     {

        this.opt={

             TTContainer:'diy_select',//控件的class

             TTDiy_select_input:'diy_select_input',//用于提交表单的class

             TTDiy_select_txt:'diy_select_txt',//diy_select用于显示当前选中内容的容器class

             TTDiy_select_btn:'diy_select_btn',//diy_select的打开按钮

             TTDiv_select_list:'diy_select_list',//要显示的下拉框内容列表class

             TTFcous:'focus'//得到焦点时的class

        }

        for(var a in opt)  //赋值 ,请保持正确,没有准确判断的

        {

            this.opt[a]=opt[a] ? opt[a]:this.opt[a];

        }

     }

}

var TTDiy_select=new diy_select({  //参数可选

    TTContainer:'diy_select',//控件的class

    TTDiy_select_input:'diy_select_input',//用于提交表单的class

    TTDiy_select_txt:'diy_select_txt',//diy_select用于显示当前选中内容的容器class

    TTDiy_select_btn:'diy_select_btn',//diy_select的打开按钮

    TTDiv_select_list:'diy_select_list',//要显示的下拉框内容列表class

    TTFcous:'focus'//得到焦点时的class

});//如同时使用多个时请保持各class一致.

</script> 

<div class='diy_select'>

     <input type='hidden' name='' class='diy_select_input'/>

     <div class='diy_select_txt'>直播课堂</div>

     <div class='diy_select_btn'></div>

     <ul class='diy_select_list'>

         <li>课程</li>

         <li>直播课堂</li>

         <li>学校</li>

         <li>老师</li>

     </ul>
 </div>