Imitating the combox (select) control, you don't have to worry about beautifying the select. You don't have to worry about beautifying the select control all day long.
1. Batch beautify the select control.
2. You can have an onchange handle.
3. The function that triggers onchange can contain parameters.
3. You can obtain the select value.
4. You can set a scroll bar similar to select (for example, a scroll bar appears when the number is greater than or equal to 8)
5. configurable width and height
API reference:
// First generate a simulateSelect instance
// The first optional parameter of the constructor is the function that triggers onchange, And the other parameter is the onchange function;
C = new simulateSelect (s1onchange, "never-online ");
// Set select CSS. The first parameter is the main CSS of the control, the second parameter is the CSS of the selected entry, and the third parameter is the CSS of the selected entry.
C. style ("CtlSelect2", "selected2", "unselected2 ");
// Set the select width and height;
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 ");
In the next version, you can modify the 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 = "Author" 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: background );*/}. selected {background: #006600; color: # ffffff; height: 20px ;}. unselected {height: 20px; color: #006600; line-height: 120%; border-bottom: 1px solid #006600 ;}. ctlSelect1 {border: 1px solid #00339 9; font-family: verdana; height: 20px; color: #003399; background: # ffffff;/* background: url(%e5066804-%d-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-%d-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 = "J AvaScript "> <! -- // ------------------------------------------------------------- // @ 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 this 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 blur's css class name // @ object. width = (widthPX) // widthPX must be a digit number. //// @ object. height = (heightPX) // heightPX must be Digit number. //// @ object. getValue (ctlSelID) // ctlSelID is the unique select control ID // -------------- for the next Version ---------- // @ object. readOnly = (blnReadOnly) // 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. na Me = 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; i0) {var arrCtlSel = ctlSelIDs. split (","); for (var I = 0; I-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. prototy Pe. simulates = function () {with (this) {for (var I = 0; I <IDs. length; I ++) eval (name ). simulate (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 + ctlS ElID); // button. value = "success"; 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. ti Tle = "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 = object [0]. text; if (readonly = true) input. readOnly = true; // this method is only IE. object. insertAdjacentElement ("afterEnd", button); object. insertAdjacentElement ("afterEnd", input); object. style. display = 'none' ;}}; simulateSelect. prototype. expand = function (ctlSelID, offset) {with (this) {var p; var object =$ (ctlSelID ); If (! $ (ContainerPrefix + ctlSelID) {p = document. createElement ("DIV"); p. style. position = "absolute"; p. style. display = "block"; p. setAttribute ("id", containerPrefix + ctlSelID); p. className = ctlStyle; p. style. left = offset. left; p. style. top = offset. top + offset. height; p. style. width = (width? Width: offset. width) + 20; if (number) {p. style. height = height * number; p. style. overflow = "auto";} document. body. appendChild (p); for (var I = 0; I <object. length; I ++) {p = document. createElement ("DIV"); p. setAttribute ("id", p. id = elementPrefix + ctlSelID + I); p. style. cursor = "default"; if (object [I]. text ==$ (inputPrefix + ctlSelID ). value) p. className = selStyle; else p. className = unselSty Le; p. innerText = p. title = object [I]. text; p. style. height = height; p. setAttribute ("value", object [I]. value); p. onmouseover = function () {for (var j = 0; j <$ (containerPrefix + ctlSelID ). childNodes. length; j ++) {if ($ (containerPrefix + ctlSelID ). childNodes [j] = this) $ (containerPrefix + ctlSelID ). childNodes [j]. className = selStyle; else $ (containerPrefix + ctlSelID ). childNodes [j]. className = unselSty Le ;}}; p. onclick = function () {$ (inputPrefix + ctlSelID ). value = this. innerText; $ (containerPrefix + ctlSelID ). style. display = "none"; if (onchange & value! = $ (InputPrefix + ctlSelID ). value) {onchange. apply (this, onchangeArgs); value = $ (inputPrefix + ctlSelID ). value ;}}; $ (containerPrefix + ctlSelID ). appendChild (p) ;}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 ). className = selStyle; else $ (elementPrefix + ctlSelID + I ). className = unselStyle;} $ (containerPrefix + ctlSelID ). style. display = "block"; return;} if ($ (containerPrefix + ctlSelID ). style. display = "block") {$ (containerPrefix + ctlSelID ). style. display = "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 () {. checkupOnMouseDown (event); B. checkupOnMouseDown (event); c. checkupOnMouseDown (event)}); window. attachEvent ("onload", function () {window. a = new simulateSelect ();. style ("CtlSelect", "selected", "unselected");. 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",. getValue ('s1'); c. style ("CtlSelect2", "selected2", "unselected2"); c. width = 320; c. init ("s3") ;}); function s1onchange (para, s) {alert ("onchage handler fire" + para + s );} // --> SCRIPT simulate combox control demonstrate <p> 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 </option> <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"> <option value = "-please select your options-">-please select your options-</option> <option value = "1"> 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 (. getValue ('s1') + '\ n \ n' + B. getValue ('s2') + '\ n \ 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> description <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 this 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 blur'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 = (blnReadOnly) // blnReadOnly must be a boolean type or a number type. // @ object. addEvent (w, h) // w: fire handler's event. // h: handler function. // ------------------------------------------------------------- </pre> <p class = "copyright"> Power By blueDestiny, never-online http://www.never-online.net </P> </BODY> </HTML>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]