首页 > 其他分享> > 既可以手动输入也可以下拉选择

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

2020-06-04 18:05:05 作者：互联网

方案思路，让下拉框的长度稍比输入框的长，然后输入框的位置放置下拉框的上面挡住（样式复杂时不适应）
<!
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