可编辑select
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>EditSelect</title>
<script>
function isIE(){
a=navigator.appVersion.split(";")
b=a[].split(" ")
return parseFloat(b[])
} if (isIE()<5.5)
{
scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><!--<iframe id=selframe frameborder=0 height=100%></iframe>--><div id="selecthtml" class="selectcontent">selectÁÐ表</div></div>'
}
else
{
scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><iframe id=selframe frameborder=0 height=100%></iframe><div id="selecthtml" class="selectcontent">selectÁÐ表</div></div>'
} document.write(scHTML)
vDiv=selectcontent
vDivHtml=selecthtml function editselect(name,size,defaulttext,width,height,readonly){
var combo=this;
this.options=new Array();
this.oj=new Array();
this.name=name;
this.divname=name+'_div';
this.buttonname=name+'_button';
this.tablename=name+'_table';
this.htmltable=name+'_html'
if (!height) this.height=; else this.height=height
if (width) this.width=width
if (!size) size=
if (!defaulttext) defaulttext=""
if (!readonly || readonly==) {readonly="" }else {if (readonly==) readonly="readonly style=cursor:default";this.readonly=} esHTML='<div id='+this.divname+'>'
+'<table id='+this.tablename+' cellpadding=0 cellspacing=0 class=select><tr><td bgcolor=#FFFFFF>'
+'<input type=text class=selecttext size="'+size+'" name='+name+' value="'+defaulttext+'" '+readonly+'><td><button class=selectbutton id='+this.buttonname+'>6</td></tr></table>'
+'</div>'
document.write(esHTML)
this.sbutton=eval("document.all."+this.buttonname) if (this.readonly==) eval("document.all."+this.name).onclick=function(){combo.show()} this.sbutton.onclick=function(){combo.show()}
this.show=function(){
pDiv=eval(combo.divname)
pTable=eval(combo.tablename)
var vHTML='<table id=htmltable cellspacing="0" cellpadding="2" bgcolor="#ffffff" class="selecttable" width=100%>'
for (i=;i<combo.options.length;i++)
{
vHTML+='<tr onmouseover="mo(this)" onmouseout="mu(this)" onclick="document.all.'+combo.name+'.value=this.innerText;selectcontent.style.visibility=\'hidden\';'+combo.oj[i]+'"><td nowrap>'+combo.options[i]
}
vHTML+="</table>"
vDivHtml.innerHTML=vHTML vtop=pDiv.offsetTop+pDiv.offsetHeight
vleft=pDiv.offsetLeft+ vParent = pDiv.offsetParent;
while (vParent.tagName.toUpperCase() != "BODY")
{
vleft += vParent.offsetLeft;
vtop += vParent.offsetTop;
vParent = vParent.offsetParent;
} var redge=document.body.clientWidth-vleft
var bedge=document.body.clientHeight-vtop if (!combo.width) {vDiv.style.width=pTable.offsetWidth} else {vDiv.style.width=combo.width} if (combo.height==)
{
vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+
vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+
}
else
{
if (htmltable.offsetHeight>combo.height)
{
vDiv.style.pixelHeight=combo.height
vDivHtml.style.pixelHeight=combo.height }
else
{ vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+
vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+
} } vDivHtml.scrollTop= if (redge<vDiv.offsetWidth)
vDiv.style.left=vleft--(vDiv.offsetWidth-redge)
else
vDiv.style.left=vleft- if (bedge<vDiv.offsetHeight)
//vDiv.style.top=vtop-vDiv.offsetHeight-pDiv.offsetHeight
vDiv.style.top=vtop-vDiv.offsetHeight+bedge
else
vDiv.style.top=vtop vDivHtml.style.width=parseInt(vDiv.style.width)
vDiv.style.visibility="visible"
} this.add=function(text,js){
combo.options[combo.options.length]=text
combo.oj[combo.oj.length]=js } this.clearall=function(){
combo.options=new Array()
} this.about=function(){ }
} function mo(obj){
obj.style.backgroundColor="#000099"
obj.style.color="#ffffff"
} function mu(obj){
obj.style.backgroundColor=""
obj.style.color="#000000"
} document.onmousedown=function(){
if (vDiv.style.visibility=="visible"){
mx=event.x + document.body.scrollLeft
my=event.y + document.body.scrollTop; x1=vDiv.offsetLeft
y1=vDiv.offsetTop x2=vDiv.offsetLeft+vDiv.offsetWidth
y2=vDiv.offsetTop+vDiv.offsetHeight if (mx<x1 || my<y1 || x2<mx || y2<my)
{
vDiv.style.visibility='hidden'
}
}
}</script> <style>
.selecttext{
border:0px
height: ;
font-family:arial;
font-size:12px;
}
.selectbutton{
font-family:webdings;
font-size:10px;
height: ;
width: ;
border:1px solid #83A5EB;
line-height:0px;
padding-bottom:3px;
background-color:#D1E0FD
}
.selecttable{
font-family:arial;
font-size:12px;
cursor:default;
}
.selectcontent
{
position: absolute;
top:;
left:;
overflow:auto;
border:1px solid #
} .selectdiv
{
position: absolute;
width:;
overflow:hidden;
}
.select{
border-collapse: collapse;
border:1px solid #7F9DB9
}
</style>
</head> <body bgcolor="#83A5EB"> <table border="" width="100%">
<tr>
<td width="" align="center"><font size="">可编辑的Select</font></td>
<td><script>
var sel1=new editselect("select1","","可编辑的Select","");
sel1.add("这是一个可以编辑的Select")
sel1.add("支持CSS")
sel1.add("可以通过CSS，修改外形")
sel1.add("突破原来的Select诸多限制")
</script></td>
</tr>
<tr>
<td width="" align="center"><font size="">长度可以随意修改
可以设置为只读</font></td>
<td>
<script>
var sel2=new editselect("select2","","长度可以随意修改",,,);
sel2.add("这是一个可以编辑的Select")
sel2.add("支持CSS")
sel2.add("可以通过CSS，修改外形") sel2.add("作者:舜子制作")
sel2.add("MSN:puterjam@msn.com")
</script>
</td>
</tr>
<tr>
<td width="" align="center"><font size="">可以遮盖系统Select</font></td>
<td>
<script>
var sel3=new editselect("select3","","可以遮盖系统Select","",);
sel3.add("这是一个可以编辑的Select")
sel3.add("支持CSS")
sel3.add("可以通过CSS，修改外形")
sel3.add("突破原来的Select诸多限制")
</script>
</td>
</tr>
<tr>
<td width="" align="right"> </td>
<td><select><option>系统的Select</option></select> </td>
</tr>
</table>
</body> </html>
http://www.jb51.net/article/914.htm
可编辑select的更多相关文章
- 可编辑的select框的实现(实用版)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEA ...
- jquery实现可编辑的下拉框( input + select )
HTML: <input id="inputModel" /> <select name="EngineModel" size="1 ...
- select()
select(),确定一个或多个套接口的状态,本函数用于确定一个或多个套接口的状态,对每一个套接口,调用者可查询它的可读性.可写性及错误状态信息,用fd_set结构来表示一组等待检查的套接口,在调用返 ...
- js,JQuery实现,带筛选,搜索的select
代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title& ...
- jqgrid 实现行编辑，表单编辑的列联动
这个问题的场景相信大家都遇到过,比方有A,B,C三列,B,C列均为下拉框.可是C列的值是由B列的值来决定的.即C列中的值是动态变化的,变化的根据就是B列中你选择的值. 本文给出的是一个有用,简易快捷的 ...
- 你想的到想不到的 javascript 应用小技巧方法
javascript 在前端应用体验小技巧继续积累. 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElemen ...
- javascript小技巧
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcE ...
- JS详解
事件源对象:event.srcElement.tagName event.srcElement.type 捕获/释放:event.srcElement.setCapture(); event.sr ...
- JS技术大全
事件源对象:event.srcElement.tagName event.srcElement.type 捕获/释放:event.srcElement.setCapture(); event.sr ...
随机推荐
- ansible模块lineinfile
示列: sshd_set.yaml --- - hosts: test remote_user: root gather_facts: False tasks: - name: set hostnam ...
- Loadrunner在post请求的cookie中插入其它多个值
有一个商城,提交订单的时候,需要在post请求的cookie中set一个code码,便于防刷 tijiao() { lr_think_time(); web_reg_save_param(" ...
- OS X： Messages Agent wants to use the "login" keychain
问题: 启动mac电脑后弹出对话框,内容是Messages Agent wants to use the "login" keychain.无法取消. 首先说下keychain是什 ...
- 配置ASP.NET Web应用程序, 使之运行在medium trust
这文章会向你展示, 怎么配置ASP.NET Web应用程序, 使之运行在medium trust. 如果你的服务器有多个应用程序, 你可以使用code access security和medium ...
- C#保存图片设置图片质量的方法
主要用到System.Drawing.Imaging命名空间下的ImageCodecInfo.Encoder.EncoderParameter.EncoderParameters四个类 实现代码 代码 ...
- linux 基础 shell脚本命令
#########shell脚本命令#### 1.diff diff file file1 ####比较两个文件的不同 -c ####显示周围的行 -u ####按照一格式统一输出生成补丁 -r ## ...
- POJ 1947Rebuilding Roads(树形DP + 01背包)
题目链接 题意:给出一个树形结构,求P个节点的子树最少要去掉几条边 分析:DP[root][j] 表示 以第 root 个为根节点, 包含j 个节点需要去掉几条边.那么对于 root 这个根节点来说, ...
- python Scrapy安装和介绍
python Scrapy安装和介绍 Windows7下安装1.执行easy_install Scrapy Centos6.5下安装 1.库文件安装yum install libxslt-devel ...
- js013-事件
js013-事件 本章内容 理解事件流 使用时间处理程序 不同的事件类型 JS与HTML之间的交互是通过实践实现的.时间就还文档或浏览器窗口发生的一些特定的交互 瞬间.可以使用侦听器来预定事件,以便时 ...
- Java数据库——使用元数据分析数据库
在JDBC中提供了DatabaseMetaData和ResultSetMetaData接口来分析数据库的元数据. DatabaseMetaData 使用DatabaseMetaData取得数据库的元信 ...