javascript模拟下拉框select

最新推荐文章于 2023-06-04 12:58:00 发布

ms_X0828

最新推荐文章于 2023-06-04 12:58:00 发布

阅读量2.4w

点赞数

分类专栏： javascript 文章标签： javascript search function input scroll class

本文链接：https://blog.csdn.net/ms_X0828/article/details/7572383

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

通过模拟下列框实现一个搜索框可以搜索多一个站点:

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

ms_X0828

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript模拟下拉框select

通过模拟下列框实现一个搜索框可以搜索多一个站点:与之间-->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, blockquot
复制链接

扫一扫