select的编辑和修改
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:editor 阅读 350
今天我一同事问我如何让select变为可编辑操作,同时可以进行删除和修改,说白了就是能进行CRUD操作。我写了个demo给他。现在分享给大家。看大家还有没有什么更简单的方法(效果如下:)//0){s

     今天我一同事问我如何让select变为可编辑操作,同时可以进行删除和修改,说白了就是能进行CRUD操作。

 我写了个demo给他。现在分享给大家。看大家还有没有什么更简单的方法(效果如下:)

// 0) { sel.options[0].selected = true; } } event.returnValue = false; break; case 8: //Back Space; var s = sel.options[sel.selectedIndex].text; sel.options[sel.selectedIndex].text = s.substr(0,s.length-1); event.returnValue = false; break; } } function catch_press(sel) { sel.options[sel.selectedIndex].text = sel.options[sel.selectedIndex].text + String.fromCharCode(event.keyCode); event.returnValue = false; } // ]]>

 test
按回车键输入新内容,按DEL删除选中内容

源代码:

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   2 <HTML>   3  <HEAD>   4   <TITLE> New Document </TITLE>   5   <META NAME="Generator" CONTENT="EditPlus">   6   <META NAME="Author" CONTENT="">   7   <META NAME="Keywords" CONTENT="">   8   <META NAME="Description" CONTENT="">   9  </HEAD>  10  <script language="JavaScript">  11 //键盘按下事件  12 function catch_keydown(sel)  13 {  14      switch(event.keyCode)  15      {  16            case 13:  17                  //Enter;  18                  //相应项目清空  19                  sel.options[sel.length] = new Option("","",false,true);  20                  event.returnValue = false;  21                  break;  22            case 27:  23                  //Esc;  24                  alert("text:" + sel.options[sel.selectedIndex].text + ", value:" +   25 sel.options[sel.selectedIndex].value + ";");  26                  event.returnValue = false;  27                  break;  28            case 46:  29                  //Delete;  30                  if(confirm("删除当前选项!?"))  31                  {  32                        sel.options[sel.selectedIndex] = null;  33                        if(sel.length>0)  34                        {  35                              sel.options[0].selected = true;  36                        }  37                  }  38                  event.returnValue = false;  39                  break;  40            case 8:  41                  //Back Space;  42                  var s = sel.options[sel.selectedIndex].text;  43                  sel.options[sel.selectedIndex].text = s.substr(0,s.length-1);  44                  event.returnValue = false;  45                  break;  46      }  47 }  48 function catch_press(sel)  49 {  50         sel.options[sel.selectedIndex].text = sel.options[sel.selectedIndex].text + String.fromCharCode(event.keyCode);  51         event.returnValue = false;  52 }  53 </script>  54 <BODY>  55 <select style="width:120px" name=s1 onkeydown="catch_keydown(this);" onkeypress="catch_press(this);"   56 style="font-size:12px;"><option>test</option></select>  57 <BR>按回车键输入新内容,按DEL删除选中内容  58  </BODY>  59 </HTML>

希望大家提点意见,欢迎留言!!!

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2