Dropdownlist可输入，可选择的方法

最新推荐文章于 2025-03-14 15:36:24 发布

原创最新推荐文章于 2025-03-14 15:36:24 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#textbox #javascript #asp #function #server #服务器

本文介绍一种实现可输入可选择下拉框的方法，不使用其他控件且代码量少。主要思路是屏蔽下拉框部分区域，将服务器端textbox置于该区域。还给出具体代码，包括javascript脚本、.html设置和后台代码，实现赋值、检查输入等功能。

在做下拉框的时候通常会要求既可以输入也可以选择，在网上也找到过好用的控件，但是很多都是要求注册，或者安装的，而且都是中文的：（在这里使用的方法不使用其它的控件，而且代码写的很少，主要的思路是将下拉框除了按钮部分都给屏蔽掉，将服务器端的textbox使用绝对位置给放到屏蔽的部分中去，赋值的时候都是给textbox值这样就可以达到既可以输入又可以选择的下拉框了。
下面就是关于这个方法的具体代码
其中分为三部分，第一部分是写的javascript脚本；第二部分为.html的设置；第三部分为后台代码，给textbox添加javascript的事件

function addTxtTanto(va){
     document.all("txtTitle").value=va;                    //将ddl中选择的值给文本框
    document.all("txtTitle").select();                         //将ddl跳转到选择的值上
}
function checktitle(){                        //检查输入的文字在ddl中的text值是否存在
    var drp = document.all("DDLTitle");     //定义ddl
    var t=document.all("txtTitle");                 //定义textbox
    var j=0;                                                         //计数
    if(t.value==""){
     }else{
            for(var i=0;i<drp.length;i++){
                  if(t.value==drp.options(i).text){
                       drp.value=drp.options(i).value;
                       break;
                  }else{
                       j=j+1;
                  }
             }
             if(j==drp.length){
                  t.value="";
                  t.select();
                  alert("タイトルが存在していません。");
             }
      }
}

<div id="selDiv" style="Z-INDEX: 100; LEFT: 48px; VISIBILITY: visible; CLIP: rect(0px 110px 80px 92px); POSITION: absolute; TOP: 26px">

        <asp:dropdownlist id="DDLTitle" style="Z-INDEX: -1" runat="server" Width="110"></asp:dropdownlist>
</div>
<asp:textbox id="txtTitle" style="Z-INDEX: 103; LEFT: 47px; POSITION: absolute; TOP: 26px" runat="server" Font-Size="10" Width="111" maxLength="50" Height="22"></asp:textbox>

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        txtTitle.Attributes("onblur") = "javascript:checktitle();"
        DDLTitle.Attributes.Add("Onchange", "addTxtTanto(this.options[this.selectedIndex].innerText)")
end sub