js模拟点击select，但是没有弹出下拉框。

我想要的就是这种有多个select，然后点击其中一个另外的select会隐藏，然后会弹出点击的select的下拉框。
比如点击第二个select，然后第一个select会隐藏，第二个select会跑到顶部。但是因为select的下拉框的出现的事件是在onmousedown里面的，所以会先出现下拉框然后其他select会隐藏。就是说在select和下拉框之间会有一段空隙。如果把隐藏select的语句放在addEventLisenter（‘mousedown’）其中，第一次是可以出现想要的结果的。但是之后几次却达不到要求。于是我就想能不能先设置一个preventDefault，取消下拉框出现的默认行为。然后在隐藏了其他select之后再模拟鼠标点击select，出现下拉框。但是也不成功。

（本人小白，刚刚入门，本来分低，求大哥们手下留情。）

阅读 3.8k

实在是找不到很好的解决方法了，于是利用列表和js来模拟select了。
代码如下，如果有更好的方法请告诉我一声，谢谢。
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    body {
        display: flex;
        flex-direction: column;
    }

    li {
        list-style: none;
        cursor: pointer;
        border: 1px solid red;
        display: none;
    }

    li:first-child {
        display: block;
    }
</style>

</head>
<body>

<div id="select">
    <ul id="list1">
        <li>请选择</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ul id="list2">
        <li>请选择</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script>

    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';
                            }
                        }
                    }
                }
            }
        }
    })
</script>

</body>
</html>

js模拟点击select，但是没有弹出下拉框。

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

前端代码更新如何通知用户刷新页面？

如何解决浏览器清除缓存导致axios请求404？

chrome控制台的$不是jquery ?

如何实现一个深拷贝函数？

求一个可以自定义排期的日历，类似于钉钉日历？

后端返回JSON编码后的数据，在前端axios接受之后，就是转为了JavaScript对应的对象是吗？