模拟简单的下拉框

html分为两部分，一部分是单纯的input，另一部分就是下拉菜单的内容

<div id="select_auto">
            <input id="input1" type="text" onclick="show()" style="width: 100px;">
            <div id="selectList">
                <ul>
                    <li class="li_cs" onclick="setValue(1)">选项1</li>
                    <li class="li_cs" onclick="setValue(2)">选项2</li>
                </ul>
            </div>
        </div>

document.getElementById("selectList").style.display = 'none';
    // 设置鼠标离开后会让下拉框隐藏
    document.getElementById('select_auto').onmouseleave = function (ev) {
        document.getElementById("selectList").style.display = 'none';
    }
    // 点击input让下拉框出现
    function show() {
        document.getElementById("selectList").style.display = '';
    }
    function hide() {
        console.log(123);
        document.getElementById("selectList").style.display = 'none';
    }
    // 选择下拉框的时候设置值并且隐藏
    function setValue(value) {
        document.getElementById("input1").value = value;
        document.getElementById("selectList").style.display = 'none';
    }

.li_cs:hover {
        background: #959FA9;
    }

    #selectList {
        z-index: 99;
        // 让下拉框跟随父元素，这样会排列到input框下面
        position: absolute;
        width: 99px;
        background: #ffffff;
        border: 1px solid #959FA9;
        border-radius: 2px;
        box-shadow: 0px 0px 3px #333333;
    }