DIV做下拉列表

DIV做下拉列表

 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ width:300px; height:300px; margin-top:20px;}
#sel{ width:210px; height:30px; border:1px solid #666; vertical-align:middle; line-height:30px; padding-left:10px;}
#items{ width:220px}
.itema{ width:200px; height:30px; border:1px solid #666; vertical-align:middle; line-height:30px; padding-left:10px; padding-right:10px; border-top:0px solid #666;}
.itema:hover{ background-color:green; color:#fff; cursor:pointer;}
</style>
</head>

<body>
    <div id="wai">
        <div id="sel">请选择</div>
        <div id="items" style=" display:none" sx="0">
            <div class="itema">网站注入</div>
            <div class="itema">SQL攻击</div>
            <div class="itema">DDos攻击</div>
            <div class="itema">渗透</div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
var sel = document.getElementById("sel");
var items = document.getElementById("items");
sel.onclick = function()
{
    var sx = parseInt(items.getAttribute("sx"));
    if(sx==1)
    {
        items.style.display = "none";
        sx=0;
        items.setAttribute("sx",sx);
        }else if(sx==0){
    items.style.display = "block";
        sx=1;
        items.setAttribute("sx",sx);
              }
    }
var itema = document.getElementsByClassName("itema");
for(var i=0;i<itema.length;i++)
{
    itema[i].onclick = function()
    {
    
        items.style.display = "none";
         sel.innerText = this.innerText;
        
        
        }
    }
</script>

 

效果图：

 

 

posted @ 2017-12-11 16:34  桃花灬仙人  阅读(410)  评论(0)  编辑  收藏  举报