js写的可编辑的select下拉框

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>使用JS+CSS实现的Select下拉框 站长学院 www.pigzz.com</title>
    <script>
    scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><iframe id=selframe frameborder=0 height=100%></iframe><div id="selecthtml" class="selectcontent">select&Aacute;&ETH;±í</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.name=name;
    this.divname=name+'_div';
    this.buttonname=name+'_button';
    this.tablename=name+'_table';
    this.htmltable=name+'_html'
    if (!height) this.height=0; else this.height=height
    if (width) this.width=width
    if (!size) size=8
    if (!defaulttext) defaulttext=""
    if (!readonly || readonly==0) {readonly="" }else {if (readonly==1) readonly="readonly style=cursor:default";this.readonly=1}
    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==1) eval(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=0;i<combo.options.length;i++)
    {
    vHTML+='<tr   onclick="document.all.'+combo.name+'.value=this.innerText;selectcontent.style.visibility=\'hidden\'"><td nowrap>'+combo.options[i]
    }
    vHTML+="</table>"
    vDivHtml.innerHTML=vHTML
    vtop=pDiv.offsetTop+pDiv.offsetHeight
    vleft=pDiv.offsetLeft+1
    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==0)
    {
    vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
    vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
    }
    else
    {
    if (htmltable.offsetHeight>combo.height)
    {
    vDiv.style.pixelHeight=combo.height
    vDivHtml.style.pixelHeight=combo.height
    }
    else
    {
    vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
    vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
    }
    }
    vDivHtml.scrollTop=0
    if (redge<vDiv.offsetWidth)
    vDiv.style.left=vleft-1-(vDiv.offsetWidth-redge)
    else
    vDiv.style.left=vleft-1
    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){
    combo.options[combo.options.length]=text
    }
    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.    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: 16;
    font-family:arial;
    font-size:12px;
    }
    .selectbutton{
    font-family:webdings;
    font-size:10px;
    height: 19;
    width: 16;
    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:0;
    left:0;
    overflow:auto;
    border:1px solid #000000
    }
    .selectdiv
    {
    position: absolute;
    width:100;
    overflow:hidden;
    }
    .select{
    border-collapse: collapse;
    border:1px solid #7F9DB9
    }
    </style>
    </head>
    <body bgcolor="#83A5EB">
    <table border="0" width="100%">
    <tr>
    <td width="151" align="center"><font size="2">可编辑的Select</font></td>
    <td><script>
    var sel1=new editselect("select1","25","可编辑的Select","");
    sel1.add("这是一个可以编辑的Select")
    sel1.add("Loveyou")
    sel1.add("可以通过CSS,修改外形")
    sel1.add("突破原来的Select诸多限制")
    </script></td>
    </tr>
    <tr>
    <td width="151" align="center"><font size="2">长度可以随意修改<br>可以设置为只读</font></td>
    <td>
    <script>
    var sel2=new editselect("select2","20","长度可以随意修改",250,82,1);
    sel2.add("这是一个可以编辑的Select")
    sel2.add("支持CSS")
    sel2.add("可以通过CSS,修改外形")
    sel2.add("作者:舜子制作")
    sel2.add("MSN:[email protected]")
    </script>
    </td>
    </tr>
    <tr>
    <td width="151" align="center"><font size="2">可以遮盖系统Select</font></td>
    <td>
    <script>
    var sel3=new editselect("select3","25","可以遮盖系统Select","",41);
    sel3.add("这是一个可以编辑的Select")
    sel3.add("这效果确实不错")
    sel3.add("可以通过CSS,修改外形")
    sel3.add("突破原来的Select诸多限制")
    </script>
    </td>
    </tr>
    <tr>
    <td width="151" align="right"> </td>
    <td><select><option>默认的Select</option></select> </td>
    </tr>
    </table>
    </body>
    </html>


你可能感兴趣的:(select,可编辑)