既可以手动输入也可以下拉选择

时间:2020-06-04 18:08:42   收藏:0   阅读:96
方案思路,让下拉框的长度稍比输入框的长,然后输入框的位置放置下拉框的上面挡住(样式复杂时不适应)
<!
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;"

 

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!