方案思路，让下拉框的长度稍比输入框的长，然后输入框的位置放置下拉框的上面挡住（样式复杂时不适应）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> function voluation() { var selectValue = $(‘#qxjSelect‘).val(); $("#qxj").val(selectValue); } </script> </head> <body> <select id="qxjSelect" style="width:300px;height:30px;" onchange="voluation()"> <option> 单相故障重合成功 </option> <option> 单相故障重合不成功 </option> <option> 单相故障重合成功后再故障 </option> <option> 重合闸充电时间不足三跳 </option> <option> 相间故障不重合 </option> <option> 强送不成功 </option> </select> <input style="width: 282px;height: 29px;margin-left: -303px;" id="qxj" type="text" /> </body> </html>
完善方案
外层加个div 然后设置为相对定位，input输入框设置为绝对定位
div的样式
<div style="position:relative" >
select的样式
<select id="qxjSelect" style="width:300px;height:30px;border-color:#ddd" onchange="voluation()">
input的样式
style="width: 282px;height: 28px;position:absolute;top:1px;left:1px;border:none;"
原文：https://www.cnblogs.com/rdchen/p/13045088.html