Html可以输入的下拉框设计

实现：设计出一个可以手动输入也可以下拉选择的控件。

思路：

　　在下拉控件的上方放置一个文本框，但是width要注意（显示出下拉按钮），所以下拉框和文本框的position属性都是absolute，下拉框选择ongchange事件，把选中的下拉项的值赋值给文本框，这时这个文本框既可以输入也可以被下拉选择（取下拉框的值）最终取文本框中的值。

    <table cellspacing="0" cellpadding="0" width="100%" border="0">
        <tr>
            <td align="left">
                <!--select标签和input外面的span标签的格式是为了使两个位置在同一位置，控制位置-->
                <span style="position: absolute; border: 1pt solid #c1c1c1; overflow: hidden; width: 188px;
                    height: 19px; clip: rect(-1px 190px 190px 170px);">
                    <select name="aabb" id="aabb" style="width: 190px; height: 20px; margin: -2px;" onchange="javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;">
                        <!--下面的option的样式是为了使字体为灰色，只是视觉问题，看起来像是注释一样-->
                        <option value="" style="color: #c2c2c2;">---请选择---</option>
                        <option value="闲人书库">闲人书库</option>
                        <option value="闲人BLOG">闲人BLOG</option>
                        <option value="闲人设计">闲人设计</option>
                        <option value="闲人软件">闲人软件</option>
                    </select>
                </span><span style="position: absolute; border-top: 1pt solid #c1c1c1; border-left: 1pt solid #c1c1c1;
                    border-bottom: 1pt solid #c1c1c1; width: 170px; height: 19px;">
                    <input type="text" name="ccdd" id="ccdd" value="输入或选择" style="width: 170px;
                        height: 19px; border: 0pt;"/>
                </span>
            </td>
        </tr>
    </table>

 

转载于:https://www.cnblogs.com/Med1tator/p/6721190.html