javascript模拟下拉框select
仲浩歌
通过模拟下列框实现一个搜索框可以搜索多一个站点:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
body {color: #000000;font: 12px/22px 微软雅黑,Arial,宋体,Sans-serif;}
button, input, select, textarea {font-size: 100%;}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {margin: 0;padding: 0;}
input {outline: medium none;}
button, input, select, textarea {font-size: 100%;}
.searchbox {background: url("http://www.58kankan.cn/statics/themes/default/images/search_mid2.gif") no-repeat scroll 0 0 transparent;position: absolute;top: 20px;left:20px;width: 417px;z-index: 100;}
.searchbox .ser_xl {background: url("http://www.58kankan.cn/statics/themes/default/images/ser_xl.gif") no-repeat scroll right 5px transparent;float: left;margin: 2px 0 0 2px;position: relative;width: 58px;z-index: 995;}
.searchbox .ser_xl a.linkbox {cursor: pointer;display: block;line-height: 30px;text-indent: 10px;}
a{color: #414141;text-decoration: none;}
.search_left {background-position: -230px -45px;display: none;height: 26px;width: 7px;float:left;}
.search_input {background: url("http://www.58kankan.cn/statics/themes/default/images/search_mid.gif") no-repeat scroll 0 0 transparent;border: 0 none;color: #D6D6D6;height: 32px;padding-left: 35px;padding-top: 2px;width: 265px;display:inline-block;float:left;}
.search_btn {background: url("http://www.58kankan.cn/statics/themes/default/images/search.gif") no-repeat scroll 0 0 transparent;border: medium none;cursor: pointer;height: 33px;width: 50px;display: block;overflow: hidden;text-indent: -9999px;float:left;}
.searchbox .ser_xl span {-moz-border-bottom-colors: none;-moz-border-image: none;-moz-border-left-colors: none;-moz-border-right-colors: none;-moz-border-top-colors: none;
background-color: #FFFFFF;border-color: -moz-use-text-color #D3D3D3 #D3D3D3;border-right: 1px solid #D3D3D3;border-style: none solid solid;border-width: medium 1px 1px;
display: block;line-height: 20px;padding: 2px;position: absolute;top: 28px;width: 52px;z-index: 99;}
.searchbox .ser_xl span a {cursor: pointer;display: block;padding-left: 8px;width: 44px;}
</style>
</head>
<body>
<div class="searchbox" id="searchbox"><form id="search" target="_blank" method="get" action="/frontend/Page/Index/id/139">
<div id="ser_xl" class="ser_xl">
<a class="linkbox">站内</a>
<span style="display:none"></span>
</div>
<span id="hidden"></span>
<span class="search_left"></span>
<input type="text" value="终极悍将2" οnfοcus="if(value=='终极悍将2') {value='';this.style.color='#6e6e6e';}" οnblur="if (value=='') {value='终极悍将2';this.style.color='#D6D6D6';}" id="keyword" class="search_input" name="title"/><button type="submit" class="search_btn">搜索</button>
</form>
<script>
var search = [{"order":"0","title":"\u7ad9\u5185","link":"\/frontend\/Page\/Index\/id\/139","keyword":"title","hidden":"<input type=\"hidden\" value=\"145\" id=\"dataid\"\/>"},{"order":"1","title":"\u4e00\u641c","link":"http:\/\/v.yisou.com\/s","keyword":"q","hidden":"<input type=\"hidden\" name=\"cid\" value=\"4568_0001\"\/>\r\n<input type=\"hidden\" name=\"sr\" value=\"1\"\/>\r\n<input type=\"hidden\" value=\"gbk\" name=\"charset\">\r\n<input type=\"hidden\" value=\"144\" id=\"dataid\"\/>"},{"order":"2","title":"\u641c\u641c","link":"http:\/\/video.soso.com\/search","keyword":"w","hidden":"<input type=\"hidden\" value=\"147\" id=\"dataid\"\/>"},{"order":"3","title":"\u767e\u5ea6","link":"http:\/\/video.baidu.com\/v","keyword":"word","hidden":"<input type=\"hidden\" value=\"148\" id=\"dataid\"\/>"}];
function __init(){
var parentContainer=getId("ser_xl");
var aObj=parentContainer.getElementsByTagName("a");
var spanObj=parentContainer.getElementsByTagName("span");
for(var i=0;i<search.length;i++){
if( i==0 ){
aObj[0].innerHTML = search[i]['title'];
getId("search").action=search[i]['link'];
getId("keyword").name=search[i]['keyword'];
getId("hidden").innerHTML = search[i]['hidden'];
}
var sapn_aObj=document.createElement("a");
var textNode=document.createTextNode(search[i]['title']);
sapn_aObj.appendChild(textNode);
sapn_aObj.setAttribute("currentIndex",i);
sapn_aObj.setAttribute("href","#");
sapn_aObj.οnclick=function(){
selectCurrentItem(this.parentNode,this);
};
spanObj[0].appendChild(sapn_aObj);
aObj[0].οnclick=function(event){
//如果当前是显示的，就隐藏，反之亦然
showHiddenUl(this);
};
spanObj[0].οnclick=function(){this.style.display="none";}
}
parentContainer.οnclick=function(event){
if(!event){event=window.event;}
//阻止事件冒泡
event.cancelBubble=true;
var eventSpanObj=this.getElementsByTagName("span")[0];
bodyClickHiddenUl(eventSpanObj);
}
}
function selectCurrentItem(spanObj,currentObj){
var parentObj=spanObj.parentNode;
var aObj=parentObj.getElementsByTagName("a")[0];
aObj.firstChild.nodeValue=currentObj.firstChild.nodeValue;
var currentIndex = currentObj.getAttribute('currentIndex');
getId("search").action=search[currentIndex]['link'];
getId("keyword").name=search[currentIndex]['keyword'];
getId("hidden").innerHTML = search[currentIndex]['hidden'];
}
function showHiddenUl(currentObj){
var parentNode=currentObj.parentNode;
var spanObj=parentNode.getElementsByTagName("span")[0];
if( spanObj.style.display == "none" ){
spanObj.style.display = "block";
}else{
spanObj.style.display = "none";
}
}
//点击body区域（非“下拉菜单”）隐藏菜单
function addBodyClick(func) {
var bodyObj=document.getElementsByTagName("body")[0];
var oldBodyClick = bodyObj.onclick;
if (typeof bodyObj.onclick != 'function') {
bodyObj.onclick = func;
} else {
bodyObj.onclick = function() {
oldBodyClick();
func();
}
}
}
//隐藏所有的UL
function bodyClickHiddenUl(eventUlObj){
var parentContainer=getId("ser_xl");
if(!parentContainer){return;}
var spanObj=parentContainer.getElementsByTagName("span");
if(eventUlObj!=spanObj[0]){
spanObj[0].style.display = "none";
}
}
function getId(elementId){
return document.getElementById(elementId);
}
__init();
//添加这个可以确保点击body区域的时候也可以隐藏菜单
addBodyClick(bodyClickHiddenUl);
//提交表单
</script>
</div>
</body>
</html>
类似资料：