<!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>
