You don't have to worry about beautifying the Select Control all day.
1, can be a lot of landscaping select control.
2, can have onchange handle.
3, the trigger onchange function can take parameters.
3, you can get the value of select.
4, can set like Select a scroll bar (such as greater than or equal to 8 number of scroll bar appears)
5. Can set width and height
API Reference:
First, a Simulateselect instance is generated
The first optional parameter of the constructor is the function that triggers the onchange, and the other is the parameter of the onchange function;
c = new Simulateselect (S1onchange, "never-online");
Sets the CSS for SELECT, the first parameter is the main CSS for the control, the second is the CSS for the selected entry, and the third is the CSS without the selected entry
C.style ("CtlSelect2", "Selected2", "Unselected2");
Sets the width and height of the select;
C.width = 320;
C.height = 20;
The initialization parameter is: The ID of the select control, which can be separated by commas for batch conversion;
C.init ("S1,s2,s3");
The next version will be modifiable Combox
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <HTML> <HEAD> <TITLE> simulate Combox Control-http://www.never-online.net </TITLE> <meta name= "generator" content= "EditPlus" > <meta NAME= "A Uthor "content=" "> <meta name=" Keywords "content=" "> <meta name=" Description "content=" "> <style> Body, input {Font-family:verdana; font-size:9pt; } h1 {Font-family:tahoma; font-size:22pt; Text-align:left; Pre {font-size:9pt; Font-family:verdana; border:1px solid #006600; width:400px; padding:10px; Background: #ffffff; Color: #006600; } . Ctlselect {border:1px solid #006600; Font-family:verdana; height:20px; Color: #006600; Background: #ffffff; /*background:url ({e5066804-650d-4757-9ba4-a92db8817a18}0.jpg); */} selected {background: #006600; Color: #ffffff; height:20px; }. UnseleCTED {height:20px; Color: #006600; line-height:120%; border-bottom:1px solid #006600; } . CtlSelect1 {border:1px solid #003399; Font-family:verdana; height:20px; Color: #003399; Background: #ffffff; /*background:url ({e5066804-650d-4757-9ba4-a92db8817a18}0.jpg); */} selected1 {background: #003399; Color: #ffffff; height:20px; }. unselected1 {height:20px; Color: #003399; line-height:120%; border-bottom:1px solid #003399; } . CtlSelect2 {border:1px solid #990000; Font-family:verdana; height:20px; Color: #990000; Background: #ffffff; /*background:url ({e5066804-650d-4757-9ba4-a92db8817a18}0.jpg); */} selected2 {background: #990000; Color: #ffffff; height:20px; }. unselected2 {height:20px; Color: #990000; line-height:120%; border-bottom:1px solid #990000; } copyright {margin-top:10px; Font-size:9pt; Text-align:center; Color: #333; Font-weight:bold; } </style> </HEAD> <BODY> <script language= "JavaScript" > <!--//------------------------ -------------------------------------//@ module:simulate Select control, IE only. @ Debug In:ie 6.0//@ Script By:bluedestiny, never-online//@ updated:2006-3-22//@ version:1.0 APHA/ @ email:bluedestiny [at] 126.com//@ website:http://www.never-online.net//@ Please Hold the item please. API//@ class:simulateselect ()///@ Object.style (Ctlstyle[,selstyle][,unselstyle])//Ctlstyle:main Control Combox CSS Class name//Selstyle:when mouseover or option Focus CSS class name//Unselstyle:options b Lur ' s CSS class name///@ object.width= (WIDTHPX)//WIDTHPX must be a digit number. @ object.height= (HEIGHTPX)//HEIGHTPX must be a digit number. @ object.getvalue (ctlselid)//Ctlselid Is the unique Select control ID///--------------for the next Version----------//@ object.readonly = (Blnreadon LY)//Blnreadonly must be a Boolean type or a number type. @ object.addevent (W, h)//W:fire handler ' s event. H:handler function. -------------------------------------------------------------function $ (objid) {return document.getElementById (ObjID); }; function Offset (e) {var t = e.offsettop; var L = e.offsetleft; var w = e.offsetwidth; var h = e.offsetheight-2; while (e=e.offsetparent) {t+=e.offsettop; L+=e.offsetleft; return {top:t, left:l, Width:w, height:h}//---------------- -------------------------------function Simulateselect (handlerfunction) {with (this) {this. IDs = []; THIS.name = this; This.value = null; This.onchangeargs = []; This.onchange = handlerfunction; This.height = 20; This.width = null; This.number = null; This.ctlstyle = "Ctlselect"; This.selstyle = "selected"; This.unselstyle = "unselected"; This.elementprefix = "e__"; This.inputprefix = "i__"; This.containerprefix = "c__"; This.buttonprefix = "b__"; Property for Beta Version//can editable combox this.readonly = true; if (arguments.length>0) for (var i=0 i<arguments.length; i++) onchangeargs[i-1] = arguments[i]; return this; }}; SimulateSelect.prototype.init = function (Ctlselids) {with (this) {eval (name). append (Ctlselids); Eval (name). simulates (); }}; SimulateSelect.prototype.style = function () {with (this) {Ctlstyle = arguments[0]; Selstyle = arguments[1]; Unselstyle = arguments[2]; }}; -----------------------------------------------simulateSelect.prototype.append = function (Ctlselids) {with (this {if (Ctlselids.indexof (",") >0) {VAR Arrctlsel = Ctlselids.split (","); for (var i=0 i<arrctlsel.length; i++) {Ids.push (arrctlsel[i]); } else Ids.push (ctlselids); }}; SimulateSelect.prototype.checkupOnMouseDown = function (e) {with (this) {//Here compatible MF. var el = e? E.srcelement:e.target; if (El.id.indexOf (elementprefix) >-1 | | El.id.indexOf (inputprefix) >-1 | | El.id.indexOf (containerprefix) >-1 | | El.id.indexOf (Buttonprefix) >-1) {return; else {for (Var i=0; i<eval (name). Ids.length; i++) if ($ (containerprefix + ids[i])) $ (Containerprefix + ids[i]). style.display = "None"; } }}; SimulateSelect.prototype.simulates = function () {with (this) {for (var i=0; i<ids.length; i++) eval (name). Si Mulate (Ids[i]); }}; SimulateSelect.prototype.simulate = function (Ctlselid) {with (this) {var input; var button; var objecT var offset; Object = $ (ctlselid); Offset = offset (object); input = document.createelement ("input"); button = document.createelement ("button"); Button.setattribute ("id", Buttonprefix + ctlselid); Button.value = "⊿"; Button.value = "6"; button.style.fontFamily = "Webdings, Marlett"; Button.style.background = ""; Button.onclick = Input.onclick = function () {This.blur (); Eval (name). Expand (ctlselid, offset); }; Input.onselectstart = function () {eval (name). Expand (ctlselid, offset); Event.returnvalue = false; }; Input.setattribute ("id", Inputprefix + ctlselid); Input.title = Button.title = "click Expand Options"; Input.style.cursor = Button.style.cursor = "Default"; Input.classname = Button.classname = Ctlstyle; Input.style.width = (width>0 width:object.offsetWidth); Height? Input.style.height=button.style.height=height: "";Input.value = value = Object[0].text; if (readonly==true) input.readonly=true; This is the only IE. Object.insertadjacentelement ("Afterend", button); Object.insertadjacentelement ("afterend", input); Object.style.display = ' None '; }}; SimulateSelect.prototype.expand = function (Ctlselid, offset) {with (this) {var div; var object = $ (ctlselid); if (!$ (Containerprefix + ctlselid)) {div = document.createelement ("div"); Div.style.position = "absolute"; Div.style.display = "block"; Div.setattribute ("id", Containerprefix + ctlselid); Div.classname = Ctlstyle; Div.style.left = Offset.left; Div.style.top = Offset.top + offset.height; Div.style.width = (width width:offset.width) + 20; if (number) {div.style.height = height * number; Div.style.overflow = "Auto"; } document.body.appendChild (div); for (var i=0 i<object.length; i++) {div = document.createelement ("div"); Div.setattribute ("id", div.id = elementprefix + ctlselid + i); Div.style.cursor = "Default"; if (object[i].text==$ (Inputprefix + ctlselid). Value) Div.classname = Selstyle; else Div.classname = Unselstyle; Div.innertext = Div.title = Object[i].text; Div.style.height = height; Div.setattribute ("value", object[i].value); Div.onmouseover = function () {for (Var j=0; j<$ (Containerprefix + ctlselid). Childnodes.le Ngth; J + +) {if ($ (containerprefix + ctlselid). Childnodes[j]==this) $ ( Containerprefix + ctlselid). Childnodes[j].classname = Selstyle; else $ (containerprefix + ctlselid). Childnodes[j].classname = Unselstyle; } }; Div.onclick = function () {$ (inputprefix + ctlselid). Value = This.innertext; $ (Containerprefix + ctlselid). Style.display = "None"; if (onchange && value!=$ (Inputprefix + ctlselid). Value) {onchange.apply (th Is,onchangeargs); Value = $ (Inputprefix + ctlselid). Value; } }; $ (Containerprefix + ctlselid). appendchild (Div); } return; } if ($ (containerprefix + ctlselid). style.display== "None" {for (var i=0; i<object.length; i++) {if (object[i].text==$ (Inputprefix + ctlselid). Value) $ (elementprefix + ctlselid + i). C Lassname = Selstyle; else $ (elementprefix + ctlselid + i). ClassName = Unselstyle; } $ (Containerprefix + ctlselid). style.display= "Block "; Return } if ($ (containerprefix + ctlselid). style.display== "Block" {$ (Containerprefix + ctlselid). Style.dis Play= "None"; Return } }}; SimulateSelect.prototype.getValue = function (Ctlselid) {with (this) {if ($ (inputprefix + ctlselid)) return $ ( Inputprefix + ctlselid). Value; else return null; }}; SimulateSelect.prototype.addEvent = function (W, h) {with (this) {}}; -----------------------------------------------//window.onerror = Function ("return true;"); IE only. Document.attachevent ("onmousedown", function () {A.checkuponmousedown (event); B.checkuponmousedown (event); C.checkuponmousedown (Event)}); Window.attachevent ("onload", function () {WINDOW.A = new simulateselect (); A.style ("Ctlselect", "Selected", "unselected"); A.init ("S1"); -------------------------------------------window.b = new Simulateselect (); B.style ("CtlSelect1", "selected1"," unselected1 "); B.width = 300; B.number = 9; B.init ("S2"); -------------------------------------------window.c = new Simulateselect (S1onchange, "Never-online", A.getvalue (' S1 ')); C.style ("CtlSelect2", "Selected2", "Unselected2"); C.width = 320; C.init ("S3"); }); function S1onchange (para, s) {alert ("Onchage handler fire" + para + s); //--> </SCRIPT> <p> Simulate Combox control </p> <p> demonstrate </p> <P&G T Normal Select: <select id= "S0" > <option value= "-Please select your options-" >-Please select your options -</option> <option value= "1" >option1</option> <option value= "2" >option2</option> < Option value= "3" >option3</option> <option value= "4" >option4</option> <option value= "5" > Option5</option> </select> </p> <p> Simulate select: <select id= "S1" > <option value ="-Please select your options-' >-Please select your options-</option> <option value= ' 1 ' >1option1</opti On> <option value= "2" >1option2</option> <option value= "3" >1option3</option> <option Value= "4" >1option4</option> <option value= "5" >1option5</option> </select> </p> <p> Scroll Simulate select: <select id= "s2" > <option value= "-Please select your options-" >-please Select your options-</option> <option value= "1" >2option1</option> <option value= "2" >2option2 </option> <option value= "3" >2option3</option> <option value= "4" >2option4</option> <option value= "5" >2option6</option> <option value= "5" >2option7</option> <option value= "5 ">2option8</option> <option value=" 5 ">2option9</option> <option value=" 5 ">2option10< /option> <option value= "5" >2option11</optiOn> <option value= "5" >2option12</option> <option value= "5" >2option13</option> <option Value= "5" >2option14</option> </select> </p> <p> onchange handler fire: <select id= "S3" & Gt <option value= "-Please select your options-" >-Please select your options-</option> <option value= "1" & Gt;3option1</option> <option value= "2" >3option2</option> <option value= "3" >3option3</ Option> <option value= "4" >3option4</option> <option value= "5" >3option5</option> </ select> </p> <button onclick= "alert (a.getvalue (' s1 ') + ' \ n ' + b.getvalue (' s2 ') + ' \ n ' + c.getvalue" (' S3 ') ) "class=" Ctlselect "> Get value </button> <button onclick=" alert (' next version ') "class=" Ctlselect "> Append item</button> <button onclick= "alert (' next version ')" class= "Ctlselect" >remove Item</button > <p> Description </p> <pre>//-------------------------------------------------------------//@ module:simulate Select control, IE only. @ Debug In:ie 6.0//@ Script By:bluedestiny, never-online//@ updated:2006-3-22//@ version:1.0 APHA/ @ email:bluedestiny [at] 126.com//@ website:http://www.never-online.net//@ Please Hold the item please. API//@ class:simulateselect ()///@ Object.style (Ctlstyle[,selstyle][,unselstyle])//Ctlstyle:main Control Combox CSS Class name//Selstyle:when mouseover or option Focus CSS class name//Unselstyle:options b Lur ' s CSS class name///@ object.width= (WIDTHPX)//WIDTHPX must be a digit number. @ object.height= (HEIGHTPX)//HEIGHTPX must be a digit number. @ object.getvalue (ctlselid)//Ctlselid is the unique select control ID///--------------for the next V Ersion----------//@ object.readonly = (blnreadonly)//Blnreadonly must be a Boolean type orA number type. @ object.addevent (W, h)//W:fire handler ' s event. H:handler function. -------------------------------------------------------------</pre> <div class= "copyright" > Power by Bluedestiny, Never-online http://www.never-online.net </div> </BODY> </HTML>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
