通过div配置下拉选项

最新推荐文章于 2023-03-14 14:55:17 发布

jhl601408785

最新推荐文章于 2023-03-14 14:55:17 发布

阅读量797

点赞数

分类专栏：前端文章标签： javascript html 前端

本文链接：https://blog.csdn.net/jhl601408785/article/details/124895456

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客记录了作者自己动手编写的一个下拉搜索小插件。插件包含一个输入框，当聚焦时显示下拉列表，列表中包含多个选项，用户可以选择或通过键盘操作。插件还实现了鼠标悬浮选项变色、选项点击选择及失去焦点隐藏列表等功能。

摘要由CSDN通过智能技术生成

在网上找的一些案例启发，自己写的一个下拉小插件，在此纪录一下。

html部分:

<form method="post" action="./home.html" >
                <label for="vacation_name">姓名：</label>
                <input type="text" id="vacation_name" name="vacation_name" value="请输入姓名" onfocus="getVacationName()" readonly>
                <div id="namelist">
                    <option>sefa12</option>
                    <option>se12fa</option>
                    <option>se1fa</option>
                    <option>s12efa</option>
                    <option>sefa3</option>
                </div> 
                <label for="vacation_begindate">开始日期：</label>
                <input type="date" min="2022-05-03" id="vacation_begindate" name="vacation_begindate" onchange="getBeginDate()">
                <label for="vacation_enddate">结束日期：</label>
                <input type="date" id="vacation_enddate" name="vacation_enddate">
                <label for="vacation_bantype">班次：</label>
                <select name="vacaion_workType" value="ALL">
                    <option value="ALL">ALL</option>
                    <option value="zhengB">选项1</option>
                    <option value="d8-3">选项12</option>
                    <option value="zhongB">选项12</option>
                    <option value="d11-6">选项14</option>
                    <option value="tuoB">选项16</option>
                </select>
                <button>提交</button>
            </form>

CSS部分：

/* second_div2 */
.second_div2{
    width: 20%;
    height: 100%;
    float: left;
    padding: 20px 28px 10px 28px;
}

.second_div2 * {
    width: 200px;
}

.second_div2 button{
    margin-top: 5px;
}

.second_div2 h3{
    text-align: center;
}

.second_div2 .vacation_name{
    overflow: scroll;

}

.second_div2 #namelist{
    width: 200px;
    height: 80px;
    overflow: auto;
    background-color: white;
    position: absolute;
    display: none;
    float: center;
}

.second_div2 #namelist a{
    float: left;
}

js部分：


function getVacationName(){
    let vacation_name = document.getElementById("vacation_name");

    let namelist = document.getElementById("namelist");
    namelist.style.display = "block";

    var flag = false; //鼠标是否在选项上标志位
    
    let heh = document.getElementsByTagName("option");
    for (var i = 0; i < heh.length; i++) {
            heh[i].onmouseover = function () {
                this.bgColor = this.style.backgroundColor;
                this.style.backgroundColor = "lightblue";
                flag = true;
            }
            heh[i].onmouseout = function () {
                this.style.backgroundColor = this.bgColor;
                flag = false;
            }
            heh[i].onclick = function() {
                vacation_name.value = this.value;
                namelist.style.display = "none";
            }
    }

    vacation_name.onchange = function(){
        namelist.style.display = "none";
    }

    vacation_name.onblur = function(){
        if(!flag){
            namelist.style.display = "none";
        }       
    }

}