JQ可编辑的下拉框<select>

下面两个是函数不一样, 样式都一样代码一全一点

代码一

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .brandname-box {
                width: 100px;
                height: 30px;
                position: relative;
            }
            
            .brandname-input {
                width: 78px;
                border: 0;
                height: 20px;
                line-height: 20px;
                padding: 3px 0;
                position: absolute;
                top: 2px;
                left: 2px;
            }
            
            .brandname-select {
                width: 100px;
                background-color: #FFF;
                border: 1px #ddd solid;
                cursor: pointer;
                height: 30px;
                left: 0px;
                position: absolute;
                top: 0px;
            }
            
            .input-init {

/*此class去除文本框的默认格式,如焦点聚焦的时候闪框*/

                outline-color: #ddd;
                outline-offset: 0; 
                outline-style: none;
                outline-width: 0;
                /*lighting-color: #fff;*/
                /*手机端注意*/
            }
        </style>
    </head>

    <body>
        <div class="brandname-box">
            <select type="text" class="brandname-select input-init" id="brandnameSelect" onchange="changeBrand(this)">
                <!--第一个隐藏 为了解决不让默认选中第一个-->
                <option style="display: none;"></option>
                <option value="65">小华</option>
                <option value="66">小红</option>
                <option value="67">小八</option>
                <option value="68">小何</option>
            </select>
            <input type="text" class="brandname-input input-init" id="brandnameInput" placeholder="请选择">
        </div>

        <button id="handlesummit">确定</button>

        <script src="../jquery-3.4.1.min.js"></script>
        <script>
            var brandName = $('#brandnameInput');
            function changeBrand(_this) {
                console.log(_this)
//                console.log('获取的id:' + _this.value, '获取的name:' + $('#brandnameSelect').find("option:selected").text())
                if(this.value) {
                    brandName .val($('#brandnameSelect').find("option:selected").text());
                } else {
                    this.value = '';
                    brandName .val('')
                }
            };
            
            $("#handlesummit").click(function(){
                console.log('获取的id:' + $('#brandnameSelect').val(), '获取的name:' + $('#brandnameSelect').find("option:selected").text())
            })
        </script>
    </body>
</html>

代码二

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .brandname-box {
                width: 100px;
                height: 30px;
                position: relative;
            }
            
            .brandname-input {
                width: 78px;
                border: 0;
                height: 20px;
                line-height: 20px;
                padding: 3px 0;
                position: absolute;
                top: 2px;
                left: 2px;
                vertical-align: middle;
            }
            
            .brandname-select {
                width: 100px;
                background-color: #FFF;
                border: 1px #ddd solid;
                cursor: pointer;
                height: 30px;
                left: 0px;
                position: absolute;
                top: 0px;
            }
            
            .input-init {
                outline-color: #ddd;
                outline-offset: 0;
                outline-style: none;
                outline-width: 0;
                /*lighting-color: #fff;*/
                /*手机端注意*/
            }
        </style>
    </head>

    <body>
        <div class="brandname-box">
            <select type="text" class="brandname-select input-init" id="brandnameSelect">
                <option value="65">小华</option>
                <option value="66">小红</option>
                <option value="67">小八</option>
                <option value="68">小何</option>
            </select>
            <input type="text" class="brandname-input input-init" id="brandnameInput">
        </div>

        <script src="../jquery-3.4.1.min.js"></script>
        <script>
            var brandName  = $('#brandnameInput');
            $('#brandnameSelect').change(function() {
                console.log('获取的id:' + this.value, '获取的name:' + $('#brandnameSelect').find("option:selected").text())
                if(this.value) {
                    brandName .val($('#brandnameSelect').find("option:selected").text());
                } else {
                    this.value = '';
                    brandName .val('')
                }
            });
        </script>
    </body>
</html>