今天我一同事问我如何让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> 希望大家提点意见,欢迎留言!!!