select选择框变得可以输入、编辑
?
一、可編輯的select
按回車鍵輸入新內容，按DEL刪除選中內容<br>
<body bgcolor="#fef4d9" οnlοad="s1.focus();">
<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>
<select name=s1 οnkeydοwn="catch_keydown(this);" οnkeypress="catch_press(this);" style="font-size:12px;"><option>-12121212121212</option><option>232323232323</option><option>343434343434</option><option>45454545454545</option><option>565656565656</option></select>
?
二、可輸入：
<html>
<head>
<title>助記碼的select選擇完美方案</title>
</head>
<script>
var addressName=new Array("沈陽","北京","大連","撫順","天津","上海");
var addressHelpCode=new Array("sy","bj","dl","fs","tj","sh");
var getSelectHelpCode=document.getElementsByName("selectHelpCode");
function init(){
?? with(getSelectHelpCode[0]){
??? length=addressName.length;
??? for(var i=0;i<length;i++){
???? options[i].value=addressHelpCode[i];
???? options[i].text=addressName[i];
??? }
?? }
}
function writeSelect(obj){
?? obj.options[obj.selectedIndex].text=obj.options[obj.selectedIndex].text + String.fromCharCode(event.keyCode);
?? event.returnValue=false;
}
function catch_keydown(sel)
{
?? switch(event.keyCode)
?? {
??? case 46:
???? //delete
???? sel.options[sel.selectedIndex].text ="";
???? 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;
??? case 13:
???? //Enter;
???? vertiyt(sel)
???? event.returnValue = false;
???? break;
?? }
??
}
function vertiyt(obj){
????? var yy=false;
?? var jj=-1;
?? with(obj){
??? for(var i=0;i<addressName.length;i++){
???? var selectedValue=options[selectedIndex].value;
???? var selectedText=options[selectedIndex].text;
???? if(addressName[i]==selectedText||addressHelpCode[i]==selectedText){
????? yy=true;
????? jj=i;
???? }
??? }
?? }
?? if(yy==true){
??? init();
??? obj.options[jj].selected=true;
?? }else{
??? init();
??? alert("沒有/""+selectedText+"/"這個地點或是助記碼！！");
?? }
}
</script>
<body οnlοad="init()">
<select name="selectHelpCode" onBlur="vertiyt(this)" οnkeydοwn="catch_keydown(this)" οnkeypress="writeSelect(this)"><option>--</option></select>
<br>
讓select變得可以輸入，并且可以驗證。
<br>
這個功能是我在一個項目中所用到的。
<br>
希望對大家有用！
</body>
</html>
?
?
?
?
<script>
function pp(){
unitid.options[9]=new Option(ok=(unitid.options[9])?unitid.options[9].innerText+String.fromCharCode(event.keyCode):String.fromCharCode(event.keyCode),"client")
unitid.selectedIndex=9;
}
?
function edit(){
if(unitid.options[9]){
if(event.keyCode==8){
var str=unitid.options[9].innerText;
var len=str.length;
unitid.options[9].innerText=str.substring(0,len-1);
if(unitid.options[9].innerText=="")unitid.remove(9);
}
if(event.keyCode==13)return false;
if(event.keyCode==32){
unitid.options[9].innerText+=" ";
?
}
}
}
</script>
<select id=unitid οnkeypress=pp() οnkeyup="edit()">
<option> </option>
<option>個</option>
<option>件</option>
<option>盒</option>
<option>箱</option>
<option>雙</option>
<option>條</option>
<option>瓶</option>
<option>罐</option>
</select>
?
?
?
?
?
?
?
- <script?language="javascript">??
- ????function?changeF()??
- ????{??
- ???????document.getElementById('makeupCo').value=??
- ???????document.getElementById('makeupCoSe').options[document.getElementById('makeupCoSe').selectedIndex].value;??
- ????}??
- </script>??
- ??
- <span?style="position:absolute;border:1pt?solid?#c1c1c1;overflow:hidden;width:188px;??
- ????height:19px;clip:rect(-1px?190px?190px?170px);">??
- <select?name="makeupCoSe"?id="makeupCoSe"?style="width:190px;height:20px;margin:-2px;"?onChange="changeF();">??
- ????<option?id='1'?value='java'>java</option>??
- ????<option?id='2'?value='c++'>c++</option>??
- ????<option?id='3'?value='python'>python</option>??
- ????<OPTION?id="99999"?VALUE=""?SELECTED>??
- </select>??
- </span>??
- <span?style="position:absolute;border-top:1pt?solid?#c1c1c1;border-left:1pt???
- ????solid?#c1c1c1;border-bottom:1pt?solid?#c1c1c1;width:170px;height:19px;">??
- ????<input?type="text"?name="makeupCo"?id="makeupCo"?value="請選擇或輸入"?style="width:170px;height:15px;border:0pt;">??
- </span>??
?
總結
以上是生活随笔為你收集整理的select选择框变得可以输入、编辑的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 实例详细讲解ASP生成静态页面方法
- 下一篇： css文本框样式收集