自定义下拉菜单

最新推荐文章于 2019-09-18 16:26:13 发布

ACGuan

最新推荐文章于 2019-09-18 16:26:13 发布

阅读量931

点赞数

分类专栏： Web前端文章标签：原生JS 自定义下拉菜单

本文链接：https://blog.youkuaiyun.com/csdnlinyongsheng/article/details/81186573

版权

Web前端专栏收录该内容

85 篇文章

订阅专栏

本文通过HTML、CSS和JavaScript展示了三种不同的自定义下拉菜单实现方式，包括使用原生JS操作DOM元素来创建下拉菜单，以及两种不同的样式和交互效果。详细代码和解释帮助读者理解如何自定义下拉菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.第一种自定义下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
   <style type="text/css">
       *{margin:0;padding:0;list-style: none;}
       .selectOption{width:200px;height:30px;line-height: 30px;border:1px solid #ccc;margin:100px auto;overflow:hidden;}
       .selectOption ul{}
       .selectOption ul li{text-align: center;}
       .selectOption ul li:hover{width:100%;background:yellow;}
       .selectText{border:none;outline: none;text-align: center;width:100%;}
   </style>
</head>
<body>

       selectOption.onclick = function(e){//点击select选项
           e.stopPropagation();
           selectOption.style.overflow = "visible";//显示
       }

       document.onclick = function()
       {
           selectOption.style.overflow = "hidden";//隐藏
       }

       for(var i = 0; i < selectOptionList.length; i++)
       {
           selectOptionList[i].index = i;
           selectOptionList[i].onclick = function(e)//select下拉选项
           {
               selectText.value = selectOptionList[this.index].innerHTML;//获得选中选项
               e.stopPropagation();
               selectOption.style.overflow = "hidden";//隐藏
           }
       }
   </script>
</body>
</html>

2.第二种自定义下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

           selectSpan[i].index = i;
           selectSpan[i].onclick = function(e)
            {
                e.stopPropagation();
               var selectKuangList = selectKuang[this.index].children[1].children;
               // for(var i = 0; i < selectKuangList.length; i++)
               // {
               //    selectKuangList[i].style.background = "";
               //    selectKuangList[i].style.color = "";
               // }
               // selectKuangList[this.index].style.background = "blue";
                if(selectKuang[this.index].style.overflow == "visible")//判断是否显示
                {
                    selectKuang[this.index].style.overflow = "hidden";//下拉菜单隐藏
                }
                else
                {
                    selectKuang[this.index].style.overflow = "visible";//下拉菜单展开
                }

               var _this = this.index;
               for(var i = 0; i < selectKuangList.length; i++)
                {
                    selectKuangList[i].index = i;

                    selectKuangList[i].onclick = function()//选项子类
                    {
                        var selectValue = selectOption[_this].options[this.index].value;//下拉菜单选中哪个选项
                       for(var i = 0; i < selectKuangList.length; i++)
                       {
                           selectKuangList[i].style.background = "";
                           selectKuangList[i].style.color = "";
                       }
                       selectKuangList[this.index].style.background = "blue";
                       selectKuangList[this.index].style.color = "#fff";
                        for(var i = 0; i < selectKuangList.length; i++)
                        {
                            selectOption[_this].options[i].removeAttribute("selected");//移除未选中的选项
                        }
                        selectOption[_this].options[this.index].setAttribute("selected", true);//选中选项
                        selectKuang[_this].style.overflow = "hidden";//下拉隐藏
                        selectSpan[_this].innerHTML = selectKuangList[this.index].innerHTML;//下拉子类赋值给文本框
                    }
                }

}

       }
       for(var i = 0; i < selectOption.length; i++)
       {
           var selectValue = selectOption[i].options[selectOption[i].selectedIndex].value;
           console.log(selectOption[i].selectedInde)
             selectSpan[i].innerHTML = selectValue;
           // var selectOptionList = selectOption[i].children;
           // for(var i = 0; i < selectOptionList.length; i++)
           // {
           //    var bb = selectOptionList[i].getAttribute("selected")
           //    console.log(bb.index);
           // }
           // var selectKuangList = selectKuang[i].children[1].children;

           // selectKuangList[i].style.background = "blue";
           // selectKuangList[this.index].style.background = "blue";
           // selectKuangList[this.index].style.color = "#fff";
           selectOption[i].index = i;
           selectOption[i].onchange = function()
           {
               console.log("dd:" + this.index);
               var selectValue = selectOption[this.index].options[selectOption[this.index].selectedIndex].value;
          selectSpan.innerHTML = selectValue;
               console.log("selectValue:" + selectValue)
                selectSpan[this.index].innerHTML = selectValue;
           }

       }

        document.onclick = function()
        {
           for(var i = 0; i < selectKuang.length; i++){
               selectKuang[i].style.overflow = "hidden";//点击任一个document隐藏
           }

        }

    </script>
</body>
</html>

-------------------------------------------------------------------------------

第三种

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

           var selectKuangDiv = document.createElement("div");
           var selectSpanDiv = document.createElement("div");
           var selectUl = document.createElement("ul");
           var selectOptionList = selectOption[i].children;

           for(var j = 0; j < selectOptionList.length; j++)
           {
               var selectLi = document.createElement("li");
               selectLi.innerHTML = selectOptionList[j].value;
               selectUl.appendChild(selectLi);
           }
           selectKuangDiv.className = "selectKuang";
           selectSpanDiv.className = "selectSpan";
           // selectSpanDiv.innerHTML = "选项";

           selectKuangDiv.appendChild(selectSpanDiv);
           selectKuangDiv.appendChild(selectUl);
           insertAfter(selectKuangDiv, selectOption[i]);
       }
       var selectBox = document.querySelectorAll(".selectBox");
        var selectKuang = document.querySelectorAll(".selectKuang");
        var selectSpan = document.querySelectorAll(".selectSpan");

}
}

       for(var i = 0; i < selectOption.length; i++)
       {
           var selectValue = selectOption[i].options[selectOption[i].selectedIndex].value;
           console.log(selectOption[i].selectedIndex)
             selectSpan[i].innerHTML = selectValue;
           var selectKuangList = selectKuang[i].children[1].children;
           selectKuangList[selectOption[i].selectedIndex].style.background = "blue";
           selectKuangList[selectOption[i].selectedIndex].style.color = "#fff";
           // console.log(selectKuangList);

           selectOption[i].index = i;
           selectOption[i].onchange = function()
           {
               // console.log("dd:" + this.index);
               var selectValue = selectOption[this.index].options[selectOption[this.index].selectedIndex].value;
          selectSpan.innerHTML = selectValue;
               // console.log("selectValue:" + selectValue)
                selectSpan[this.index].innerHTML = selectValue;
           }

       }

        document.onclick = function()
        {
           for(var i = 0; i < selectKuang.length; i++){
               selectKuang[i].style.overflow = "hidden";//点击任一个document隐藏
           }

        }

    </script>
</body>
</html>