仿select 模拟一个下拉框

最新推荐文章于 2024-04-25 18:10:41 发布
ZDM_9999
最新推荐文章于 2024-04-25 18:10:41 发布
阅读量214
点赞数
文章标签： css html css3
本文链接：https://blog.csdn.net/ZDM_9999/article/details/130872441
版权
话不多说直接上代码
<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JS模拟select下拉菜单</title>
    <style>
        body {
            font-size: 15px;
            
        }

        em {
            font-style: normal;
        }

        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        .box-one{
            display: flex;
        }
        .box-two{
            display: flex;
        }
        .box {
            position: relative;
            margin: 10px 10px;
        }
         

        .select {
            display: inline-block;
            border: 1px solid #ccc;
            padding: 5px;
            width: 270px;
            cursor: pointer;
        }

        .arrow {
            color: #888;
            position: relative;
            left: -25px;
        }

        .sub {
            display: none;
            border: 1px solid #ccc;
            border-top: none;
            border-bottom: none;
            width: 270px;
        }

        .sub li {
            border-bottom: 1px solid #ccc;
            padding: 5px;
            cursor: pointer;
        }

        .sub li:hover,
        .sub li.hover {
            background: #eee;
        }
    </style>
</head>

<body>
    <h3>JS模拟selec下拉菜单</h3>
    <div class="box-one">
        <div class="box">
            <span class="select">请选择下拉列表项</span><em class="arrow">▼</em>
            <ul class="sub">
                <li>项目1</li>
                <li>项目2</li>
                <li>项目3</li>
            </ul>
        </div>
        <div class="box">
            <span class="select">请选择下拉列表项</span><em class="arrow">▼</em>
            <ul class="sub" style="display: none;">
                <li>项目1</li>
                <li>项目2</li>
                <li>项目3</li>
            </ul>
        </div>
        <div class="box">
            <span class="select">请选择下拉列表项</span><em class="arrow">▼</em>
            <ul class="sub" style="display: none;">
                <li>项目1</li>
                <li>项目2</li>
                <li>项目3</li>
            </ul>
        </div>
    </div>
    <div class="box-two">
        <div class="box">
            <span class="select">请选择下拉列表项</span><em class="arrow">▼</em>
            <ul class="sub" style="display: none;">
                <li>项目1</li>
                <li>项目2</li>
                <li>项目3</li>
            </ul>
        </div>
        <div class="box">
            <span class="select">请选择下拉列表项</span><em class="arrow">▼</em>
            <ul class="sub" style="display: none;">
                <li>项目1</li>
                <li>项目2</li>
                <li>项目3</li>
            </ul>
        </div>
        <div class="box">
            <span class="select">请选择下拉列表项</span><em class="arrow">▼</em>
            <ul class="sub" style="display: none;">
                <li>项目1</li>
                <li>项目2</li>
                <li>项目3</li>
            </ul>
        </div>
    </div>
    <script>
        window.onload = function () {

            var oBox = document.getElementsByClassName('box');
            var oSel = document.getElementsByClassName('select');
            var oSub = document.getElementsByTagName('ul');
            var oEm = document.getElementsByTagName('em');
            var aLi = document.getElementsByTagName("li")

            document.onclick = function () {
                for (let i = 0; i < oSub.length; i++) {
                    oSub[i].style.display = "none"
                }
                document.getElementsByClassName(".sub").style.display = "none"
            }
            // 点击显示隐藏下拉列表
            for (let i = 0; i < oSel.length; i++) {
                oSel[i].onclick = function (ev) {
                    var oEvent = ev || event;

                    if (oSub[i].style.display == 'block') {
                        oEm[i].innerHTML = "▼";
                        // alert(oEm.innerHTML);
                        oSub[i].style.display = 'none';
                    } else {
                        oEm[i].innerHTML = "▲";
                        oSub[i].style.display = 'block';
                    }
                    // 阻止默认事件
                    oEvent.cancelBubble = true;
                };
            }



            // 循环遍历所有li，为每个li添加相应事件
            for (let i = 0; i < aLi.length; i++) {
                // 鼠标移入，给li添加hover类
                aLi[i].onmouseover = function () {
                    this.className = 'hover';
                };

                // 鼠标移出，移出li的class
                aLi[i].onmouseout = function () {
                    this.className = '';
                };

                // 点击li，将oSel的内容替换成当前li的值
                aLi[i].onclick = function () {
                    if (i < 3) {
                        oEm[0].innerHTML = "▼";
                        oSel[0].innerHTML = this.innerHTML;
                    }
                    if (i >= 3 && i < 6) {
                        oEm[1].innerHTML = "▼";
                        oSel[1].innerHTML = this.innerHTML;
                    }
                    if (i >= 6 && i < 9) {
                        oEm[2].innerHTML = "▼";
                        oSel[2].innerHTML = this.innerHTML;
                    }
                    if (i >= 9 && i < 12) {
                        oEm[3].innerHTML = "▼";
                        oSel[3].innerHTML = this.innerHTML;
                    }
                    if (i >= 12 && i < 15) {
                        oEm[4].innerHTML = "▼";
                        oSel[4].innerHTML = this.innerHTML;
                    }
                    if (i >= 15 && i < 18) {
                        oEm[5].innerHTML = "▼";
                        oSel[5].innerHTML = this.innerHTML;
                    }
                };
            }
        };
    </script>
</body>

</html> -->


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>JS模拟select下拉菜单</title>
<style>
  body {
   font-size: 15px;
   /* display: flex; */
  }

  em {
   font-style: normal;
  }

  ul {
   padding: 0;
   margin: 0;
   list-style: none;
  }

  .box {
   position: relative;
  }
  .box-one,.box-two{
   display: flex;
  }

  .select {
   display: inline-block;
   border: 1px solid #ccc;
   padding: 5px;
   width: 270px;
   cursor: pointer;
  }

  .arrow {
   color: #888;
   position: relative;
   left: -25px;
  }

  .sub {
   display: none;
   border: 1px solid #ccc;
   border-top: none;
   border-bottom: none;
   width: 270px;
  }

  .sub li {
   border-bottom: 1px solid #ccc;
   padding: 5px;
   cursor: pointer;
  }

  .sub li:hover,
  .sub li.hover {
   background: #eee;
  }
</style>
</head>

<body>
<!-- <h3>JS模拟selec下拉菜单</h3> -->
<div class="box-one">
<div class="box">
  <span class="select">请选择下拉列表项1</span><em class="arrow">▼</em>
  <ul class="sub">
   <li>项目1-1</li>
   <li>项目2-1</li>
   <li>项目3-1</li>
  </ul>
</div>
<div class="box">
  <span class="select">请选择下拉列表项2</span><em class="arrow">▼</em>
  <ul class="sub">
   <li>项目1-2</li>
   <li>项目2-2</li>
   <li>项目3-2</li>
  </ul>
</div>
<div class="box">
  <span class="select">请选择下拉列表项3</span><em class="arrow">▼</em>
  <ul class="sub">
   <li>项目1-3</li>
   <li>项目2-3</li>
   <li>项目3-3</li>
  </ul>
</div>
</div>

<div class="box-two">
<div class="box">
  <span class="select">请选择下拉列表项4</span><em class="arrow">▼</em>
  <ul class="sub">
   <li>项目1-4</li>
   <li>项目2-4</li>
   <li>项目3-4</li>
  </ul>
</div>
<div class="box">
  <span class="select">请选择下拉列表项5</span><em class="arrow">▼</em>
  <ul class="sub">
   <li>项目1-5</li>
   <li>项目2-5</li>
   <li>项目3-5</li>
  </ul>
</div>
<div class="box">  
    <span class="select">请选择下拉列表项6</span><em class="arrow">▼</em>
    <ul class="sub">
     <li>项目1-6</li>
     <li>项目2-6</li>
     <li>项目3-6</li>
    </ul>
   </div>
<script>
var oBox = document.getElementsByClassName('box');
var oSel = document.getElementsByClassName('select');
var oSub = document.getElementsByTagName('ul');
var oEm = document.getElementsByTagName('em');
var aLi = document.getElementsByTagName("li")
//点击任意空白处收起所有下拉框，并且复位三角
document.onclick= function(){
    for(let i =0;i<oSub.length;i++){
        oSub[i].style.display = "none"
        oEm[i].innerHTML = "▼";
        }
    }
// 遍历所有oSel
for (let i = 0; i < oSel.length; i++) {
    //根据遍历判断点击的哪个oSel下拉框
  oSel[i].onclick = function (ev) {
    var oEvent = ev || event;
    //排他效果让点击的元素显示隐藏
    for (let i = 0; i < oSel.length; i++){
    oEm[i].innerHTML = "▼";
    oSub[i].style.display = 'none';
    }
    oEm[i].innerHTML = "▲";
    oSub[i].style.display = 'block';


    // 阻止默认事件
    oEvent.cancelBubble = true;

    // 遍历li
    for(let k = 0;k<aLi.length;k++){
    // 鼠标移入，给li添加hover类
    aLi[k].onmouseover = function () {
        this.className = 'hover';
    };
    // 鼠标移出，移出li的class
    aLi[k].onmouseout = function () {
        this.className = '';
    };
    //点击li
    aLi[k].onclick = function () {
        //打印出当前点击的是哪个下拉框和内容
        console.log('当前是',oSel[i],this.innerHTML);
        // console.log(111);
        //把对应的li内容赋值到对应的下拉框
        oSel[i].innerHTML = aLi[k].innerHTML;
        oEm[i].innerHTML = "▼";
        // alert(oEm.innerHTML);
        oSub[i].style.display = 'none';
    }
    }
  };
}
</script>