可修改內容的下拉式選單
<%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>可修改內容的下拉式選單</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
sel.options[sel.selectedIndex].value = sel.options[sel.selectedIndex].text;
event.returnValue = false;
}
//-->
</script>
</HEAD>
<body bgcolor="#fef4d9">
按Enter輸入新內容，按DEL刪除選中內容，按ESC顯示選中內容；可輸入資料<br>
可惜的是只能新增修改option的文字(text)項，如果有新增選項的話，option的值(value)會和文字相同
post回去的話除非server端程式要作動態修正，否則選單的選項不會改變
<form method=post>
<select name=s1 onkeydown="catch_keydown(this);" onkeypress="catch_press(this);" style="font-size:12px;">
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
<option>選項4</option>
<option>選項5</option>
</select>
<br/>
<input type=submit name=btn class="btn_query" value="送出">
<br/>
<%if Request.Form("s1") <> "" then Response.Write "選項內容為：" & Request.Form("s1")%>
</form>
</BODY>
</HTML>
留言列表
