asp.net 可選可輸入的dropdownlist

2023-04-28 22:05:08

大家好，又見面了，我是你們的朋友全棧君。

我們都知道，dropdownlist控件是無法直接輸入文本的，隻能選擇下拉菜單中的選項。為了友善使用，我們可以用多種方法來實作既可選擇又可輸入的dropdownlist的效果。主要思路有.通過js代碼來實作，或是在背景代碼中實作。但是今天主要介紹通過html中的select和input控件相結合的的來實作。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>可輸入的dropdownlist</title>
</head>
<body>
<table>
    <tr>
        <td  style="font-size: 12px;">  
            既可以輸入新的資訊，又可以從下拉框中選擇：
        </td>
        <td>
            <select name="myselect"  id="myselect" runat="server" style=" width:200px; position:absolute; clip:rect(auto auto auto 181px); " οnchange="document.getElementById('txtPlace').value=this.value" >
                <option value="">請選擇</option>
                <option value="大一"> 大一 </option>
                <option value="大二"> 大二 </option>    
                <option value="大三"> 大三 </option>
                <option value="大四"> 大四 </option>
            </select>
            <input name="txtPlace" id="txtPlace" style=" width:200px;"  type="text"  />   
        </td>
    </tr>
</table>
</body>
</html>

複制

我們還可以在css檔案中設定他們的顯示效果，比如：

input, select {
    font-size:16px;                 //設定字型大小
    border:1px solid #CFCFCE;       //設定邊框效果
}

複制

如果下拉框裡的内容需要從資料庫裡擷取的話，可以為select設定資料源并綁定：

List<suppliesinfo> unitlist = new CommonFunction().BCheckSupplies();
myselect.DataSource = unitlist;
myselect.DataTextField = "unit";
myselect.DataBind();

複制

下面就是最終的實作效果：

釋出者：全棧程式員棧長，轉載請注明出處：https://javaforall.cn/105742.html原文連結：https://javaforall.cn