Select label simulation/beautification method using JS external plug-in

<Select> the appearance of tags is annoying. Different browsers are inconsistent. for IE alone, a single version has a look and cannot be modified with CSS.

Here I will share my beautification Method for <select>.
Advantage: <select> is still used. It only changes the appearance, does not change the Form behavior, and loads JS later. (Note: This script depends on jQuery)

Nothing to say, all in the code.
Copy codeThe Code is as follows:
$ (Document). ready (function (){
// Identify the <select> flag to be beautified. We use a class name "beautify" to confirm that <select> without this style will be ignored.
Var selects = $ ("select. beauts ");
If (selects. length> 0 ){
// Add a <div> at the bottom of the Code to carry and display the drop-down box options.
$ ("Body"). append ("<div id = 'dummydata' style = 'position: absolute; display: none'> </div> ");
// Beautify the image.
Selects. each (function (){
// Set an alias for this (that is, <select>) in this function, which will be used in the following anonymous Functions
Var select = this;
// Create a <input>,. dummy will be used to define a special style for this class <input>
// Copy some of the <select> attributes and styles to the dummy input
// After the creation, insert the <input> into the dom, followed by the original <select>
Var input = $ ("<input type = 'text' readonly = 'readonly' class = 'input dummy'/> ")
. Attr ("disabled", this. disabled)
. Css ("width", parseInt (this. style. width) + "px ")
. Css ("display", this. style. display)
. InsertAfter (this)
. Val (this. options [this. selectedIndex]. text );
// Hide <select>. do not define display: none in. beautify, because we have to use it when js loading fails.
This. style. display = "none ";
// When <input class = 'dummy'> is clicked
Input. click (function (){
// Call up the previously created <div id = 'dummydata'> and clear the content
// Pass the <select> style table to it. When you need to modify this <div>, these style definitions are used.
Var div = $ ("# dummydata ")
. Empty ()
. Attr ("class", select. className );
// Set the width of <div>
// Here we determine a special class name "extend"
// If there is a. extend, the width will be subject to additional custom control; otherwise, the width will be consistent with <input> by default.
$ (Select). hasClass ("extend ")
? Div.css ("width ","")
: Div.css ("width", $ (this). innerWidth ());
// Copy <option> to <div id = 'dummydata'>, and a <option> corresponds to a <a> tag
For (var I = 0; I <select. options. length; I ++ ){
Var item = select. options [I];
Var a = $ ("<a href = 'javascript: void (0); 'class = 'nowrap '> </a> ")
. Css ("color", item. style. color)
. AddClass (item. className)
. Html (item. text)
. AppendTo (div );
If (I = select. selectedIndex ){
A. addClass ("selected ");
}
// When the option is clicked, the <input> content is displayed as the corresponding <option>, close the <div> layer, and bubble the event to the original <select>
A. click (function (){
Var n = $ (this). index ();
Select. selectedIndex = n;
Input. val (select. options [n]. text );
Div. hide ();
$ (Select). change ();
});
}
// Here we will judge a special class name "noscroll"
// When there are too many options, a scroll bar will appear in the Option List by default; however, if there is. noscroll modifier, no scroll bar will be forced
Var noscroll = (select. options. length <10 | $ (select). hasClass ("noscroll "));
If (/msie 6/I. test (window. navigator. userAgent )){
Div.css ("height", noscroll? "Auto": "215px" ).css ("overflow-y", noscroll? "Hidden": "scroll ");
} Else {
Div.css ("max-height", noscroll? "Pixel PX": "215px ");
}
// Here we determine a special class name "onside"
// If there is a. onside modifier, the pop-up option layer will be on the side, otherwise it will be on the following
// Note: two functions locateBeside and locateBelow are used in the js library.
$ (Select). hasClass ("onside ")
? Div. locateBeside (this,-2)
: Div. locateBelow (this,-4 );
// Perform intelligent adjustment on things such as repeated click <input>
If (window. activeDummySelect = select ){
Div. slideToggle (100 );
} Else {
Div. hide (). slideDown (100 );
Window. activeDummySelect = select;
}
// When a scroll bar exists, we need to scroll the scroll bar to the position of the selected item.
If (! Select. selectedIndex> 6 & div [0]. scrollHeight> div. height ()){
Div. scrollTop (select. selectedIndex-3) * div [0]. firstChild. offsetHeight );
}
});
});
// Do not forget to hide the <div # dummydata>
$ (Document). click (function (e ){
If (! Certificate (e.tar get). is (". dummy ")&&! Objects (e.tar get). is ("# dummydata ")){
$ ("# Dummydata"). hide ();
}
});
}
});

Two methods are used in the code above: locateBeside and locateBelow, which are extensions of jQuery in my js library. By the way, two methods locate and locateCenter are provided.
The Code is as follows:
Copy codeThe Code is as follows:
$. Fn. extend ({
Locate: function (x, y ){
If (this.css ("position") = "fixed "){
Y-= $ (document). scrollTop ();
}
Return this.css ({left: x, top: y });
},
LocateBeside: function (el, adjustX ){
Var p = $ (el). offset (),
W1 = $ (el). outerWidth (),
W2 = this. outerWidth (),
H2 = this. outerHeight (),
X = p. left + w1 + 5 + (adjustX | 0 ),
Y = p. top;
If ($ (document). width () <x + w2 ){
X = p. left-w2-5-(adjustX | 0 );
}
If ($ (document). height () <y + h2 ){
Y = p. top-(y + h2 + 15-$ (document). height ());
}
Return this. locate (x, y );
},
LocateBelow: function (el, adjustY ){
Var p = $ (el). offset ();
Return this. locate (p. left, p. top + $ (el). outerHeight () + 3 + (adjustY | 0 ));
},
LocateCenter: function (){
Return this. locate (
($ (Window). width ()-this. width ()/2,
($ (Window). height ()-this. height ()/2 + $ (document). scrollTop ()
);
}
});

Finally, we provide some examples of style table definition and the demonstration effect:
Copy codeThe Code is as follows:
Input. dummy {background-image: url (/static/images/combo.gif); background-position: right 12px; background-repeat: no-repeat; cursor: pointer! Important ;}
Input. dummy: hover, input. dummy: focus {background-image: url (/static/images/combo_hover.gif );}
# Dummydata {position: absolute; z-index: 20; border: 1px solid # a4601e; background-color: #393939; max-height: 200px; overflow: auto ;}
# Dummydata a {display: block; color: # ddd; line-height: 25px; text-indent: 3px; text-overflow: ellipsis ;}
# Dummydata a: hover {color: # 198cef; text-decoration: none ;}
# Dummydata. matrix {width: 208px; padding: 5px;}/* matrix effect */
# Dummydata. matrix a {float: left; width: 33% ;}
# Dummydata. matrix-large {width: 640px; padding: 5px;}/* matrix-large effect */
# Dummydata. matrix-large a {float: left; width: 25% ;}
# Dummydata a. fullwidth {float: none ;}
# Dummydata a. delimiter {float: none; width: 100%; height: 10px; visibility: hidden ;}
# Dummydata a. selected {color: yellow ;}

The style defined above

 
Only a few class modifications are required in html.