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>
效果图：
