下面两个是函数不一样, 样式都一样 代码一全一点
代码一
<!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>