杂志

可以编辑的下拉列表

by 曾经沧海
382 阅读

<html>
<head>
<title>可以编辑的下拉列表 – by WildWind<wildwind_zz@21cn.com>…</title>
<script language="JavaScript">
<!–
function catch_keydown(sel)
{
 switch(event.keyCode)
 {
  case 13:
   //Enter;
   sel.options[sel.length] = new Option("","",false,true);
   event.returnValue = false;
   break;
  case 27:
   //Esc;
   alert("text:" + sel.options[sel.selectedIndex].text + ", value:" + sel.options[sel.selectedIndex].value + 

";");
   event.returnValue = false;
   break;
  case 46:
   //Delete;
   if(confirm("删除当前选项!?"))
   {
    sel.options[sel.selectedIndex] = null;
    if(sel.length>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;
}
//–>
</script>
</head>

<body onload="s1.focus();">
<h3>操作方法:</h3>
<p>ƒ.按Enter键开始添加输入新的选项…<br>„.按Del键删除当前选项…<br>….按Esc键查看当前选项的text和value

值…<br>†.按BackSpace键删除当前选项的前一个字符…<br>
</p>
<h3>测试结果:</h3>
<p>ƒ.IE6.0测试通过…<br>
</p>
<br>
<h3>建议&意见:</h3>
<p>ƒ.大家可以做成htc,将这些函数绑在css上(很简单,不再介绍…)…<br>
</p>
<h3>示例:</h3>
<p>
<select name=s1 onkeydown="catch_keydown(this);" onkeypress="catch_press(this);" style="font-

size:12px;"><option>—</option></select>
</p>
</body>
</html>

发表评论