You don't have to worry about beautifying the Select Control all day.
1. You can beautify the Select control in batch.
2, can have onchange handle.
3, trigger onchange function can take parameters.
3, you can get the value of select.
4, can be set like a select similar scroll bar (such as a scroll bar greater than or equal to 8 number)
5. Width and height can be set
API Reference:
First generate an instance of Simulateselect
The first optional parameter of the constructor is a function that triggers 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 when the item is selected, and the third is the CSS when no entry is selected
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 Co Ntrol-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: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> </pead> <BODY> <p> Simulate Combox control </p> <p> demonstrate </p> <p> Normal Select: <select id= "S0" > <option value= "-Please select your options-" >-Select your options-</o Ption> <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 S Elect your options-">-Select your options-</option> <option value=" 1 ">1option1</option> &L T;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-" >-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-" >-Select your options-</option> <option value= "1" >3o Ption1</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 class=" Brush:php;toolbar:false " >//-------------------------------------------------------------//@ module:simulate Select control, IE only. @ Debug In:ie 6.0//@ Script By:bluedestiny, never-online//@ updated:2006-3-22//@ version:1.0 APHA//@ E Mail:bluedestiny [at] 126.com//@ website:http://www.never-online.net//@ Please hold this item. API//@ class:simulateselect ()////@ Object.style (ctlstyle[,seLstyle][,unselstyle])//Ctlstyle:main control Combox CSS class name//Selstyle:when mouseover or option Focus CS S 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 Versi On----------//@ object.readonly = (blnreadonly)//Blnreadonly must is 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 http ://www.never-online.net </BODY> </HTML>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
