js模拟select下拉菜单控件的代码_javascript技巧

来源：动视网责编：小采时间：2020-11-27 21:09:18

js模拟select下拉菜单控件的代码_javascript技巧

js模拟select下拉菜单控件的代码_javascript技巧: 代码如下: js模拟select *{ margin:0; padding:0;} li{ list-style:none;} body{ font:12px 宋体; color:#666;} .select_down{ margin:100px auto; position:relative; width:600px; min-h

推荐度：

点击下载本文 文档为doc格式

导读js模拟select下拉菜单控件的代码_javascript技巧: 代码如下: js模拟select *{ margin:0; padding:0;} li{ list-style:none;} body{ font:12px 宋体; color:#666;} .select_down{ margin:100px auto; position:relative; width:600px; min-h

代码如下:

js模拟select

select选择

jq的select模拟1

jq的select模拟2

jq的select模拟3

select选择2

jq的select模拟11

jq的select模拟22

jq的select模拟31

window.onload=function(){
var oflink = document.getElementById('sel');
var aDt = oflink.getElementsByTagName('dt');
var aUl = oflink.getElementsByTagName('ul');
var aH3= oflink.getElementsByTagName('h3');
for(var i=0;i aDt[i].index = i;
aDt[i].onclick = function(ev){
var ev = ev || window.event;
var This = this;
for(var i=0;i aUl[i].style.display = 'none';
}
aUl[this.index].style.display = 'block';
document.onclick = function(){
aUl[This.index].style.display = 'none';
};
ev.cancelBubble = true;

};
}
for(var i=0;i
aUl[i].index = i;

(function(ul){

var iLi = ul.getElementsByTagName('li');

for(var i=0;i iLi[i].onmouseover = function(){
this.className = 'hover';
};
iLi[i].onmouseout = function(){
this.className = '';
};
iLi[i].onclick = function(ev){
var ev = ev || window.event;
aH3[this.parentNode.index].innerHTML = this.innerHTML;
ev.cancelBubble = true;
this.parentNode.style.display = 'none';
};
}

})(aUl[i]);
}

}