原生js实现下拉列表框

代码：

 !DOCTYPE HTML  html  head  meta http-equiv= Content-Type content= text/html; charset=utf-8  title PHP --下拉框 /title  style ul , h2 { padding:0; margin:0; }li { list-style:none; }#list { width:240px; border:1px solid #333; margin:0 auto; }#list .lis {}#list h2 { height:30px; line-height:30px; text-indent:20px; background:yellow; color:#000; }#list .active { background:orange; color:#000; }#list ul { display:none; }#list ul li { line-height:24px; border-bottom:1px solid #333; text-indent:24px; }#list ul .hover { background:pink; } /style  script window.onload = function (){ var oUl = document.getElementById( list  var aH2 = oUl.getElementsByTagName( h2  var aUl = oUl.getElementsByTagName( ul  var aLi = null; var arrLi = []; for(var i=0;i aH2.length;i++){ aH2[i].index=i; aH2[i].onclick = function(){ for(var i=0;i aH2.length;i++){ if(aH2[i] !=this){ aUl[i].style.display= none  aH2[i].className=  if(this.className== ){ aUl[this.index].style.display= block  this.className= active  }else{ aUl[this.index].style.display= none  this.className=  for(var i=0;i aUl.length;i++){ aLi = aUl[i].getElementsByTagName( li  for(var j=0;j aLi.length;j++){ arrLi.push(aLi[j]); for(var i=0;i arrLi.length;i++){ arrLi[i]. unction(){ for(var i=0;i arrLi.length;i++){ if(arrLi[i] !=this){ arrLi[i].className=  if(this.className== ){ this.className= hover  }else{ this.className=  /script  /head  body  ul id= list >
免费拿去研究吧！更多好的源码尽在PHP ，关注我们给你好看哦~
相关推荐：
css，js骰子抽奖源码
html会动的小狗狗源码
js原声实现简单的微信聊天功能
以上就是原生js实现下拉列表框的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。