200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > html点击下拉框无反应 js模拟点击select 但是没有弹出下拉框。

html点击下拉框无反应 js模拟点击select 但是没有弹出下拉框。

时间:2019-10-16 09:56:38

相关推荐

html点击下拉框无反应 js模拟点击select 但是没有弹出下拉框。

实在是找不到很好的解决方法了,于是利用列表和js来模拟select了。

代码如下,如果有更好的方法请告诉我一声,谢谢。

Document

body {

display: flex;

flex-direction: column;

}

li {

list-style: none;

cursor: pointer;

border: 1px solid red;

display: none;

}

li:first-child {

display: block;

}

请选择234 请选择234

let select = document.getElementById('select');

select.addEventListener('click',(e)=>{

if(e.target.tagName == 'LI'){

let parentNode = e.target.parentNode;

let broderNodes = e.target.parentNode.childNodes;

let childrenNodes = e.target.parentNode.parentNode.childNodes;

let list = [];

for(let i in childrenNodes){

if([].indexOf.call(childrenNodes,childrenNodes[i])%2 == 1){

list.push(childrenNodes[i])

}

}

if([].indexOf.call(broderNodes,e.target) == 1){

if(broderNodes[3].style.display == 'block'){

for (let i in list){

if(e.target.parentNode != list[i]){

list[i].style.display = 'block';

}else{

let nodes = list[i].childNodes;

for(let j in nodes){

if([].indexOf.call(nodes,nodes[j]) == 1){

nodes[j].innerHTML = e.target.innerHTML;

}else if([].indexOf.call(nodes,nodes[j])%2 == 1){

nodes[j].style.display = 'none';

}

}

}

}

}else{

for (let i in list){

if(e.target.parentNode != list[i]){

list[i].style.display = 'none';

}else{

let nodes = list[i].childNodes;

for(let j in nodes){

if([].indexOf.call(nodes,nodes[j])%2 == 1){

nodes[j].style.display = 'block';

}

}

}

}

}

}else{

for (let i in list){

if(e.target.parentNode != list[i]){

list[i].style.display = 'block';

}else{

let nodes = list[i].childNodes;

for(let j in nodes){

if([].indexOf.call(nodes,nodes[j]) == 1){

nodes[j].innerHTML = e.target.innerHTML;

}else if([].indexOf.call(nodes,nodes[j])%2 == 1){

nodes[j].style.display = 'none';

}

}

}

}

}

}

})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。