自定义下拉框

sam_kee

浏览: 19833 次
性别:
来自: 广州

最近访客更多访客>>

dengyi21

vodart

chamzep

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>自定义样式的下拉框</title>  
<style type="text/css">  
.search{width:450px;height:30px;position:relative;margin:5px}  
.search form{margin:0}  
.search .keyword{width:300px;height:22px;padding:6px 5px 0;text-indent:5px;font-size:14px;border:1px solid #3E99D4;float:left}  
.search .select_menu{width:65px;height:28px;font-size:14px;border:1px solid #3E99D4;border-left:0;float:left;cursor:pointer}  
.search .select_type{font-size:14px;height:22px;padding:6px 0 0 10px;background:url(/images/arr_select.gif) no-repeat right top}  
.search .select_list{width:65px;position:absolute;left:311px;top:29px;border:1px solid #3E99D4;margin:0;padding:0;list-style:none;display:none}  
.search .select_list li{height:24px}  
.search .select_list a{width:100%;height:24px;color:#000;background:#fff;line-height:24px;display:block;font-size:14px;text-indent:10px;text-decoration:none}  
.search .select_list a:hover{color:#fff;background:#50c0cd}  
.search .btn_submit{float:left;margin-left:5px}  
</style>  
</head>  
  
<body>  
<div class="search">  
 <form method="post" onSubmit="return checkform(this)">  
     <input type="hidden" id="s_type" name="s_type" class="type">  
        <input type="text" name="keyword" class="keyword">  
        <div id="select_menu" class="select_menu">  
            <div id="select_type" class="select_type">类型</div>  
            <ul id="select_list" class="select_list">  
                <li><a href="javascript:void(0)" name="web" onClick="selectMenu(this)">网页</a></li>  
                <li><a href="javascript:void(0)" name="news" onClick="selectMenu(this)">新闻</a></li>  
                <li><a href="javascript:void(0)" name="video" onClick="selectMenu(this)">视频</a></li>  
            </ul>  
        </div>  
        <input type="image" src="/images/btn_submit.gif" name="submit" class="btn_submit">  
    </form>  
</div>  
  
<script type="text/javascript">  
function G(id){  
 return document.getElementById(id);  
}  
function delEvent(obj,eventType,func){  
    if(obj.detachEvent){  
        obj.detachEvent("on" + eventType,func);  
    }else{  
        obj.removeEventListener(eventType,func,false);  
    }  
}  
function addEvent(obj,eventType,func){  
    if(obj.attachEvent){  
        obj.attachEvent("on" + eventType,func);  
    }else{  
        obj.addEventListener(eventType,func,false);  
    }  
}  
function initSelect(){  
    var s_type = G("s_type");  
    var select_type = G("select_type");  
    var select_list = G("select_list");      
    var t = null;  
    var list = select_list.getElementsByTagName("a");  
    addEvent(select_type, "click", function(){  
        select_list.style.display = select_list.style.display == "block" ? "none" : "block";  
    });  
    addEvent(select_type, "mouseover", function(){  
        clearTimeout(t);  
    });  
    addEvent(select_type, "mouseout", function(){  
        t = setTimeout(function(){  
            select_list.style.display = "none";  
        },50);  
    });  
    addEvent(select_list, "mouseover", function(){  
        clearTimeout(t);  
    });  
    addEvent(select_list, "mouseout", function(){  
        t = setTimeout(function(){  
            select_list.style.display = "none";  
        },50);  
    });  
    for(var i = 0; i < list.length; i++){  
        list[i].onclick = function(){  
            select_type.innerHTML = this.innerHTML;  
            s_type.value = this.innerHTML;  
            //如果提交给后端的不是所选择的文字而是英文代号，则使用此代码  
            //s_type.value = this.name;  
            select_list.style.display = "none";  
        }  
    }  
}  
function checkform(f){  
    alert("您输入的关键字是：" + f.keyword.value + " 您选择的类型是：" + f.s_type.value);  
    //return true;  
    return false;  
}  
initSelect();  
</script>  
</body>  
</html>

分享到：