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<Meta name = "Generator" content = "EditPlus"> <meta name = "Author" content = ""> <meta name = "Keywords" content = ""> <meta name = "Description" content = ""> <br/> <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 #003399; font-family: verdana; height: 20px; color: #003399; background: # ffffff;/* background: background );*/}. 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: background );*/}. 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> <p> <br/> simulate combox control demonstrate <p> normal select: <br/> <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> simulate select: <br/> <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> scroll simulate select: <br/> <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> onchange handler fire: <br/> <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> <br/> <button onclick =" alert ('Next version ') "class =" CtlSelect "> append item </button> <br/> <button onclick =" alert ('Next version ') "class =" CtlSelect "> remove item </button> </p> 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> Power By blueDestiny, never-online </p> <p> http://www.never-online.net </p> <p>