Select.html
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Div simulated select </title>
</Head>
<Style>
Li {list-style-type: none ;}
</Style>
<Body>
<SCRIPT type = "text/JavaScript" Language = "JavaScript" src = "Select. js"> </SCRIPT>
<Br>
<Table width = "500" border = "1" cellspacing = "1" cellpadding = "1" style = "width: 200px; margin-left: 20px; margin-top: 10px; ">
<Tr>
<TD style = "width: 150px;">
<SCRIPT>
VaR sltcname = new selectwhb ("sltcname ");
Sltcname. addoption ("Long live people's republic of china 0", "0 ");
Sltcname. addoption ("Long live people's republic of china 1", "1 ");
Sltcname. addoption ("Long live people's republic of china 2", "2 ");
Sltcname. addoption ("Long live people's republic of china 3", "3 ");
Sltcname. INIT ();
</SCRIPT>
</TD>
<TD> <input type = "button" name = "Submit" value = "check result" onclick = "alert ('sltcname. value = '+ document. getelementbyid ('sltcname '). value) "style =" width: 60px; Border: 1px solid #999999; padding-top: 3px; Background: # f0f0f0; "/> </TD>
</Tr>
<Tr>
<TD>
<SCRIPT>
VaR objselect2 = new selectwhb ("objselect2 ");
Objselect2.width = 150;
Objselect2.addoption ("Long live of the People's Republic of China", "1 ");
Objselect2.addoption ("Fortune Reform Commission", "2 ");
Objselect2.addoption ("Industrial and Commercial Bank of China", "3 ");
Objselect2.init ();
</SCRIPT>
</TD>
<TD>
<SCRIPT>
VaR objselect3 = new selectwhb ("objselect3 ");
Objselect3.addoption ("Long live of the People's Republic of China", "1 ");
Objselect3.addoption ("Fortune Reform Commission", "2 ");
Objselect3.addoption ("Industrial and Commercial Bank of China", "3 ");
Objselect3.init ();
</SCRIPT> </TD>
</Tr>
<Tr> <TD>
<SCRIPT>
VaR company_type = new selectwhb ("company_type ");
Company_type.addoption ("common SP", "1 ");
Company_type.addoption ("CP", "3 ");
Company_type.addoption ("OSP", "4 ");
Company_type.addoption ("non-certified companies", "5 ");
Company_type.init ();
</SCRIPT>
</TD> <TD> test </TD> </tr>
</Table>
</Body>
</Html>
Select. js
// JavaScript document
//************************************** ***************************************
// Do not remove this notice.
//
// Copyright 2007 by whb147 ).
// Special thanks to csdn's support
//************************************** ***************************************
// Determine browser and version.
Function browser (){
VaR UA, S, I;
This. isie = false; // Internet Explorer
This. ISNs = false; // Netscape
This. Version = NULL;
This. Name = "";
This. getbrowsername = getbrowsername;
UA = navigator. useragent;
S = "MSIE ";
If (I = UA. indexof (s)> = 0 ){
This. isie = true;
This. Version = parsefloat (UA. substr (I + S. Length ));
This. Name = s;
Return;
}
S = "netscape6 /";
If (I = UA. indexof (s)> = 0 ){
This. ISNs = true;
This. Version = parsefloat (UA. substr (I + S. Length ));
This. Name = s;
Return;
}
/Treat any other "gecko" browser as NS 6.1.
S = "gecko ";
If (I = UA. indexof (s)> = 0 ){
This. ISNs = true;
This. Version = 6.1;
This. Name = s;
Return;
}
S = "Opera ";
If (I = UA. indexof (s)> = 0 ){
This. isie = true;
This. Version = 6.1;
This. Name = s;
Return;
}
}
Function getbrowsername ()
{
Return this. Name;
}
Function option (HTML, value, CSS, selected ){
This. Text = HTML;
This. value = value;
This.css = CSS;
This. isselected = selected;
}
Function selectwhb (name)
{
This. Name = Name;
This. ID = Name;
This. Length = 125;
This. Height = 25;
This. fontsize = 10;
This. isopened = false;
This. dataarray = new array ();
This. browser = new browser ();
This. init = selectinit;
This. writecss = writecssslt;
This. writeobject = writeselect;
This. onclickbtn = onclickslt;
This. onselected = onselectedslt;
This. onclickoption = onclickoption;
This. hiddendiv = hiddenoption;
This. changecolor = changeoptioncolor;
This. changecolorback = changeoptioncolorback;
This. onleaveselect = onleaveselect;
This. isleave = isleaveselect;
This. addoption = addselectoption;
This. gettextbyte = gettextbyte;
This. subtextbytestring = subtextbytestring;
}
Function addselectoption (text, value, CSS, selected)
{
This. dataarray [This. dataarray. Length] = New Option (text, value, CSS, selected );
}
Function selectinit ()
{
This. writecss (this );
This. writeobject (this );
}
Function writecssslt ()
{
VaR textwight = This. Width-17;
VaR optiontwight = This. Width-5;
Document. Write ("<style type =/" text/CSS/"> ");
Document. Write ("# sltwhb" + this. Name + "Li {list-style-type: none; margin: 0px ;}");
Document. write ("# sltwhb" + this. name + "{width:" + this. width + "PX; Z-index: 1; font-size:" + this. fontsize + "PT; Border: 0px solid red; padding: 0px; margin: 0px; text-algin: Left ;}");
Document. write ("# slttext" + this. name + "{border: 1px solid # cccccc; width:" + this. width + "PX; Height: 16px; margin: 0px ;");
Document. write ("padding-top: 4px; padding-bottom: 0px; Z-index: 2; color: #333333; overflow: hidden; Background: URL (images/select.gif) "+ textwight +" PX 0px no-Repeat ;}");
Document. write ("# sltoption" + this. name + "{border: 1px solid # cccccc; border-top: 0px solid # cccccc; width:" + optiontwight + "PX; Z-index: 3; display: none; padding: 0px; margin: 0px; position: absolute; Background: # f7f7f7 ;}");
Document. write (". pcss "+ this. name + "{list-style-type: none; cursor: hand; margin: 0px; font-size:" + this. fontsize + "PT; overflow: hidden; width:" + optiontwight + "PX; Height: 16px; Border: 0px solid red; margin: 0px; Word-break: Keep-all; padding-top: 4px ;}");
Document. Write (". btnie (float: Left; width: 20px; Height: 22px ;)");
Document. Write (". btnns (width: 20px; Height: 22px ;)");
Document. Write ("</style> ");
}
Function writeselect ()
{
Document. write ("<Div id =/" sltwhb "+ this. name + "/" onmouseout =/"" + this. name + ". onleaveselect (event)/"style =/" margin: 0px;/"> ");
Document. write ("<input type =/" hidden/"name = '" + this. name + "3 'id =/" "+ this. ID + "/" value =/"123456/"/> ");
Document. Write ("<ul style =/" margin: 0px; padding: 0px;/"> ");
Document. write ("<li id =/" slttext "+ this. name + "/" onclick =/"" + this. name + ". onclickbtn ('sltoption "+ this. name + "');/"> </LI> ");
Document. write ("<li id =/" sltoption "+ this. name + "/" onmouseleave =/"" + this. name + ". onclickoption ('sltoption "+ this. name + "')/" onclick =/"" + this. name + ". onclickoption ('sltoption "+ this. name + "')/"> ");
Document. Write ("<ul style =/" margin: 0px; padding: 0px;/"> ");
For (VAR I = 0; I <this. dataarray. length; I ++)
{
If (this. dataarray [I]. isselected)
{
Document. getelementbyid ("slttext" + this. Name). innerhtml = This. subtextbytestring (this. dataarray [I]. innerhtml, (this. width)/8 );
Document. getelementbyid ("slttext" + this. Name). Title = This. dataarray [I]. text;
Document. getelementbyid (this. ID). value = This. dataarray [I]. value;
}
Document. write ("<li onclick =/" "+ this. name + ". onselected (this)/"onmousemove = '" + this. name + ". changecolor (this) 'onmouseout = '"+ this. name + ". changecolorback (this) 'class = 'pcss "+ this. name + "'");
Document. write ("value =/" "+ this. dataarray [I]. value + "/" Title =/"" + this. dataarray [I]. text + "/"> "+ this. dataarray [I]. text + "</LI> ");
}
Document. Write ("</ul> ");
Document. Write ("</LI> ");
Document. Write ("</ul> ");
Document. Write ("</div> ");
}
Function onselectedslt (OBJ)
{
// Alert (obj. innerhtml );
Document. getelementbyid ("slttext" + this. Name). innerhtml = This. subtextbytestring (obj. innerhtml, (this. width)/8 );
Document. getelementbyid ("slttext" + this. Name). Title = obj. innerhtml;
Document. getelementbyid (this. ID). value = obj. value;
// Alert (obj. value );
}
Function onclickslt (OBJ)
{
If (this. isopened = false)
{
Document. getelementbyid (OBJ). style. Display = "Block ";
This. isopened = true;
}
Else
{
Document. getelementbyid (OBJ). style. Display = "NONE ";
This. isopened = false;
}
}
Function onclickoption (OBJ)
{
// Alert (OBJ );
Document. getelementbyid (OBJ). style. Display = "NONE ";
This. isopened = false;
}
Function hiddenoption ()
{
If (this. isopened = true)
Document. getelementbyid ('sltoption '). style. Display = "Block ";
}
Function changeoptioncolor (OBJ)
{
OBJ. style. backgroundcolor = "# e1e1e1 ";
}
Function changeoptioncolorback (OBJ)
{
OBJ. style. backgroundcolor = "";
}
Function onleaveselect (E)
{
If (this. isleave (e ))
{
// Alert (11 );
}
Else
{
Document. getelementbyid ("sltoption" + this. Name). style. Display = "NONE ";
This. isopened = false;
}
}
Function isleaveselect (E)
{
If (! This. isopened)
{
Return false;
}
VaR X, Y;
// This area must be compatible with browsers. Later, I will test ie here.
If (this. browser. isie)
{
X = Window. event. X;
Y = Window. event. Y;
}
If (this. browser. ISNs)
{
X = E. pagex;
Y = E. Pagey;
}
VaR left = 0;
VaR Top = 0;
VaR right = 0;
VaR Bottom = 0;
Left = Document. getelementbyid ("sltoption" + this. Name). offsetleft;
Top = Document. getelementbyid ("sltoption" + this. Name). offsetTop-2;
Right = Document. getelementbyid ("sltoption" + this. Name). offsetleft + document. getelementbyid ("sltoption" + this. Name). offsetwidth;
Bottom = Document. getelementbyid ("sltoption" + this. Name). offsettop + document. getelementbyid ("sltoption" + this. Name). offsetheight;
If (x> left) & (x <right) & (Y> top) & (Y <bottom ))
{
Return true
}
Return false;
}
Function gettextbyte (STR)
{
Tempstr = Str. Replace (/[/x00-/xFF]/g, "");
Tempstr = tempstr. Replace (/[/uff61-/uff9f]/g, "A"); // halfwidth false text
Tempstr = tempstr. Replace (/[/u3041-/u309f]/g, "AA"); // fullwidth false text
Tempstr = tempstr. Replace (/[/u30a0-/u30ff]/g, "AA"); // full-angle video false text
Tempstr = tempstr. Replace (/[^/x61-/x61]/g, "AA ");
Return tempstr. length;
}
Function subtextbytestring (STR, Len)
{
VaR I = 0;
VaR rtnstr = "";
VaR substr = "";
For (I = 0; I <gettextbyte (STR); I ++)
{
Substr = Str. substr (I, 1 );
If (gettextbyte (substr) = 2 & Len> = 2)
{
Rtnstr = rtnstr + substr;
Len = len-2;
}
Else if (gettextbyte (substr) = 1 & Len> = 1)
{
Rtnstr = rtnstr + substr;
Len = len-1;
}
Else if (gettextbyte (substr) = 2 & Len <2)
{
Break;
}
Else if (gettextbyte (substr) = 1 & Len <1)
{
Break;
}
}
Return rtnstr
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
