可编辑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 ...

随机推荐

Windows Directory ACL Security Check By ACL Baseline
catalog . Windows NTFS ACL(MAC) Permission . How the System Uses ACLs . 服务器不安全ACL配置带来的攻击向量 . NTFS AC ...
dedecms /member/reg_new.php SQL Injection Vul
catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 Dedecms会员中心注入漏洞 2. 漏洞触发条件 http://127 ...
protected的使用注意
在c#的可访问性级别中,public和private算是最容易理解的,相反protected往往令人非常头疼.经常在网上查资料的朋友往往会发现,答案几乎都是前篇一律,不是从msdn上拷贝的就是从别人的 ...
Java垃圾收集学习笔记
(1)除了释放不再被引用的对象,垃圾收集器还要处理堆碎块 .请求分配新对象时可能不得不增大堆空间的大小,虽然可以使用的空闲空间是足够的,但是堆中没有没有连续的空间放得下新对象.可能会导致虚拟机产生不 ...
TcpClient类与TcpListener类
TcpClient类 //构造方法1 TcpClient t = new TcpClient(); t.Connect(); //构造方法2 IPEndPoint iep = ); TcpClient ...
POJ3292 Semi-prime H-numbers
传送门: 刷<数论一本通>时看到的题,简单记录一下. 题目大意(照抄书上的):形如4n+1的数被称为H数,乘法在H数组成的集合内是封闭的.在这个集合中是能被1和本身整除的数叫H-素数,其余 ...
HTML meta viewport属性详细说明
viewport并非只是ios上的独有属性,在android.winphone上同样也有viewport,下面为大家详细介绍下HTML meta viewport 什么是Viewport 手机浏览器是 ...
HBase基础和伪分布式安装配置
一.HBase(NoSQL)的数据模型 1.1 表(table),是存储管理数据的. 1.2 行键(row key),类似于MySQL中的主键,行键是HBase表天然自带的,创建表时不需要指定 1.3 ...
js020-JSON
js020-JSON 20.1 语法 JSON的语法可以表示为一下三种类型的值. 简单值使用与JS相同的语法,可以在JSON中表示字符串.数值.布尔值和null,但是JSON不支持JS中的特殊性Un ...
css重点章节复习—布局-边框-边距-浮动 (部分)
css重点章节复习—布局-边框-边距-浮动在第二个任务中,这一块的后面那条线真的弄了很久.起初也是在html里面写的代码.之后觉得这样不好,想到第一个页面中用到的border-bottom和bord ...

可编辑select

可编辑select的更多相关文章

随机推荐

热门专题