用Javascript脚本写的一个全新的Select

由于系统自带的Select实在是不好用,这里我用javascript写了一个全新的Select.

　　功能:

1.可编辑的Select

2.长度可以随意修改

3.可以遮盖系统Select

4.支持forms

5.支持CSS修改外观

　　使用方法

　　var 实体化变量=new editselect(名字,长度,默认字符串,宽度,高度,只读)

实体化变量.add(option数值)

　　这只是一个测试版,很多功能没有完善,比如没有区分value和caption等等,希望大家提出宝贵意见.

scHTML='

'

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='

'

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='

'

for (i=0;i

{

vHTML+='

'+combo.options[i] } vHTML+="

"

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.style.left=vleft-1-(vDiv.offsetWidth-redge)

else

vDiv.style.left=vleft-1

if (bedge

//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.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

{

vDiv.style.visibility='hidden'

}

}

}

可编辑的Select	var sel1=new editselect("select1","25","可编辑的Select",""); sel1.add("这是一个可以编辑的Select") sel1.add("支持CSS") sel1.add("可以通过CSS，修改外形") sel1.add("突破原来的Select诸多限制")
长度可以随意修改 可以设置为只读	var sel2=new editselect("select2","20","长度可以随意修改",250,82,1); sel2.add("这是一个可以编辑的Select") sel2.add("支持CSS") sel2.add("可以通过CSS，修改外形") sel2.add("作者:舜子制作") sel2.add("MSN:puterjam@msn.com")
可以遮盖系统Select	var sel3=new editselect("select3","25","可以遮盖系统Select","",41); sel3.add("这是一个可以编辑的Select") sel3.add("支持CSS") sel3.add("可以通过CSS，修改外形") sel3.add("突破原来的Select诸多限制")
	系统的Select

友情提示：全选代码复制运行，您也可以先修改部分代码再运行查看效果 。