可以编辑的Select (第二版)

原创 2002年10月02日 11:47:00

观看效果

<script src="editableselect.js"></script>
<select id="EditableSelect">
<option>可以编辑的select第二版</option>
<option>Bencalie制作</option>
</select>

=======================
editableselect.js

window.onload=function(){
 var objSelect=EditableSelect
 var obj=document.all.EditableSelect
 getTop=obj.offsetTop;
 getLeft=obj.offsetLeft;
 while(objSelect=objSelect.offsetParent){
 getTop+=objSelect.offsetTop;
 getLeft+=objSelect.offsetLeft;
 }

 var oNewItem=document.createElement("OBJECT"); 
 document.body.insertBefore(oNewItem);
 oNewItem.outerHTML="<object id=editable style=/"z-index:2;position:absolute/" type=/"text/x-scriptlet/" data=/"addin2.htm/"></object>";

 editable.style.left=getLeft+1
 editable.style.top=getTop+1
 editable.style.width=obj.offsetWidth-19
 editable.style.height=obj.offsetHeight-3
 
 obj.onchange=function(){editable.str(obj.options[obj.selectedIndex].text)}
 obj.onresize=function(){editable.style.width=obj.offsetWidth-19}
}

function addNewOption(value){
 EditableSelect.options[EditableSelect.length]=new Option(value,value)
}

=======================
addin2.htm

<script language="vbs">
function public_str(theStrIn)
 strIn.value=theStrIn
end function
</script>
<body leftmargin=0 topmargin=0>
<script language="javascript">
function check(){
var obj=parent.document.all.EditableSelect
var theValue=document.all.strIn.value.replace(/^/s*/g,"").replace(//s*$/g,"")
if(event.keyCode==13){
if(theValue!=""){
for(i=0;i<obj.length;i++)
 if(obj.options[i].text==theValue){
  alert("该选项已经存在!");
  document.all.strIn.focus();
  document.all.strIn.value="";
  return;
 }
parent.addNewOption(theValue) 
}
document.all.strIn.value=""
}
}
</script>
<input id=strIn style='border:0;width:100%;height:100%;padding-top:2px' onkeydown=check()>
</body>

杂七杂八JS : input输入框和select不可改的方法

一:input输入框不可改有几种方式      方式一:onfocus="this.blur()" ---在某对象获得焦点时,使其失去焦点                   改方式因为失去焦点,所...
  • xixiruyiruyi
  • xixiruyiruyi
  • 2017年01月06日 11:02
  • 2126

jqGrid 行编辑 select 3级联动 的一种实现方法

最近在项目中遇到一个问题,因为
  • fxtayj
  • fxtayj
  • 2014年04月16日 15:47
  • 3877

apue《UNIX环境高级编程第三版》第二章答案详解

转载请标明本博客地址 UNIX高级编程第二章习题答案:
  • hubbybob1
  • hubbybob1
  • 2015年11月11日 22:11
  • 1356

Android编辑权威指南(第二版) CriminalIntent应用源码

  • 2017年11月18日 22:53
  • 5.07MB
  • 下载

Python科学计算第二版(可编辑)

  • 2017年12月16日 00:01
  • 57.39MB
  • 下载

可编辑的select

  • 2018年01月11日 12:10
  • 43KB
  • 下载

实现select下拉选项可编辑

  • 2016年01月16日 21:11
  • 9KB
  • 下载

html select 可输入 可编辑

  • 2014年06月18日 12:00
  • 1KB
  • 下载

《Java 源码分析》:Java NIO 之 Selector(第二部分selector.select())

《Java 源码分析》:Java NIO 之 Selector(第二部分selector.select())上篇博文《Java 源码分析》:Java NIO 之 Selector(第一部分Select...
  • u010412719
  • u010412719
  • 2016年10月14日 21:39
  • 2878

JQuery实战第二讲:可以编辑的表格

EditTable.html JQuery实例2:可以编辑的表格鼠标点击表格项就可以编辑学号姓名000001张三000002李四000003王五000004赵六 editTable.c...
  • u011674177
  • u011674177
  • 2015年08月19日 14:26
  • 276
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:可以编辑的Select (第二版)
举报原因:
原因补充:

(最多只允许输入30个字)