DropDownList下拉框可编辑功能的实现

实现步骤

一、在页面中增加如下脚本：

    <script language="javascript" type="text/javascript">
        function selectedDDL(selectEle )
        {
            selectEle.options[selectEle.length]=new Option("","",false,true);
        }//当你选中dropdownlist的时候为他创建一个新项目
        function updateDDLContent(selectEle)
        {
            selectEle.options[selectEle.selectedIndex].text=  selectEle.options[selectEle.selectedIndex].text + String.fromCharCode(event.keyCode);
         var tempText=document.getElementById(selectEle.name+"Text");
           tempText.value=selectEle.options[selectEle.selectedIndex].text;
        }//当键盘按下时，修改一个dropdownlist的option内容

        function selectEvent(selectEle)
        {
           switch(event.keyCode)
           {
              case 8:
              selectEle.options[selectEle.selectedIndex].text="";
              event.returnValue=false;
              break;
              case 46:
              selectEle.options[selectEle.selectedIndex].text="";
              break; 
           }

        }//用来处理delete和space两个按键的响应

        function bindContentToTextBox( selectEle  )
        {
           var tempText=document.getElementById(selectEle.name+"Text");
           tempText.value=selectEle.options[selectEle.selectedIndex].text;
        }//将内容帮定到textbox

    </script>

二、后台页面代码中，增加如下代码：

            下拉控件ID.Attributes.Add("ondblclick", "selectedDDL(this)");
            下拉控件ID.Attributes.Add("onkeypress", "updateDDLContent(this)");
            下拉控件ID.Attributes.Add("onkeydown", "selectEvent(this)");
            下拉控件ID.Attributes.Add("onchange", "bindContentToTextBox(this)");

 

即可实现效果