下拉框输入示例-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40285497/article/details/80794024

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery.js"></script>
    <style>
        *{padding: 0;margin: 0;box-sizing: border-box;}
        .input-drop-down-box{position: relative;}
        .input-drop-down-box>input{border: 1px solid #ddd;width: 100%;height: 28px;outline: none;padding: 0 10px;color: #000;}
        .input-drop-down-box>input:focus{border-color: aqua;}
        .input-drop-down-box>span{position: absolute;right: 10px;top: 10px;width: 0;height: 0;border: 6px solid rgba(0,0,0,0);border-bottom: 0;border-top-color: black;}
        .input-drop-down-box>span.up{transform: rotate(180deg);}
        .input-drop-down-box>div{position: absolute;top: 28px;width: 100%;display: none;}
        .input-drop-down-box>div>span{display: block;padding: 0 10px;color:#000;}
    </style>
</head>
<body>
<div class="input-drop-down-box inputDropDownBox">
    <input type="text" placeholder="请输入">
    <span></span>
    <div class="menu">
        <span>a</span>
        <span>b</span>
        <span>c</span>
    </div>
</div>

<script>
    var tempInput = null,
        menu = null,
        icon = null;
    $(document).on('click','.inputDropDownBox',function () {
        tempInput = $(this).children('input');
        menu = $(this).children('.menu');
        icon =  $(this).children('span');
        menu.slideToggle();
        icon.toggleClass('up');
    });
    $(document).on('click','.inputDropDownBox>div>span',function (e) {
        tempInput.val($(this).text());
        menu.slideUp();
        icon.removeClass('up');
        e.stopPropagation();
    })
</script>
</body>
</html>

简单的下拉选择框