可輸入的下拉框（簡易實現）

第一種效果

（帶自動匹配）這個效果再之前的的博客里面已經講到過了，還沒有看過的小伙伴可以移步→ http://www.cnblogs.com/zhangxiaoyong/p/5763432.html

第二種效果

今天主要講第二種效果，也比較簡單，先看下效果

實現

頁面部分

<form runat="server">
    <asp:DropDownList ID="DropDownList" runat="server" Width="180px" AutoPostBack="false"
        Style="position: absolute;" onchange="SearchChange();">
    </asp:DropDownList>
   
        <iframe id="DivShims" src="javascript:false;" scrolling="no" frameborder="0" style="position: absolute;
            height: 20px;" width="158px"></iframe>
 <input type="text" id="txtCName" runat="server" style="width: 158px; position: absolute;" />
</form>

js部分

<script type="text/javascript">
    function SearchChange() {
        var ddl = document.getElementById("DropDownList");
        var index = ddl.selectedIndex;
        var Value = ddl.options[index].value; //獲取選中下拉列表的值
        $("#txtCName").val(Value);//將選中的值賦值給input
    }
</script>

后台測試代碼

List<string> list = new List<string>()
{ 
     "湖北武漢", "湖北咸寧",  "湖北孝感", "湖北安陸", "湖北恩施" 
};
foreach (var item in list)
{
      DropDownList.Items.Add(item);
}

 Demo傳送帶→  https://github.com/XiaoYong666/show_TextBox