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>