Simulation/beautification of SELECT Tag--JS plug-ins, late loading

Source: Internet
Author: User
Tags extend

<select> Label appearance problem is very annoying, each browser is inconsistent, simply on IE, a version of a look, can not be decorated with CSS.

In this will I share the beautification method of <select>.
Advantages: Still retain the use of <select>, only change the appearance, do not change the form behavior does not interfere, late loading JS. (Note: This script relies on jquery)

Don't say anything, it's all in the code.

The code is as follows Copy Code

$ (document). Ready (function () {

To find the <select> tag that needs to be beautified, we use a class name "beautify" to determine that <select> without this style will be ignored
var selects = $ ("select.beautify");
if (Selects.length > 0) {

Add a <div&gt to the bottom of the code, to host and display the dropdown box options
$ ("Body"). Append ("<div id= ' dummydata ' style= ' position:absolute; Display:none ' ></div> ');

A landscaping.
Selects.each (function () {

Set an alias for this (that is, <select>) under this function, which will be used in the following anonymous function
var select = this;

Create a <input>,. Dummy will be used for our special style definition of <input> of this type
At the same time, copy some of the properties and styles of <select> to this dummy input
Once created, insert this <input> into the DOM, keeping up with the original <select>
var input = $ ("<input type= ' text ' readonly= ' readonly ' class= ' input dummy '/> ')"
. attr ("Disabled", this.disabled)
. CSS ("width", parseint ( + "px")
. CSS ("display",
. InsertAfter (This)
. val (This.options[this.selectedindex].text);

Hide <select> don't define display:none in. Beautify because JS fails, we have to use it. = "None";

When <input class= ' dummy ' > was clicked (function () {
Pull up the <div id= ' Dummydata ' that was created earlier and empty the contents
Pass the <select> style sheet to it, and when you need to decorate the <div>, rely on these style definitions
var div = $ ("#dummydata")
. Empty ()
. attr ("Class", select.classname);

Set the width of <div>
Here we judge a special class name "Extend"
If you have. Extend, the width will be subject to additional customization control; otherwise, width will default to <input>
$ (select). Hasclass ("Extend")
? Div.css ("width", "")
: Div.css ("width", $ (this). Innerwidth ());

<option> Copy to <div id= ' Dummydata ' >, a <option> corresponds to a <a> mark
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",
. addclass (Item.classname)
. HTML (Item.text)
. Appendto (Div);
if (i = = Select.selectedindex) {
A.addclass ("selected");
When the selected item is clicked, the,<input> content is displayed as the corresponding <option> close the <div> layer while bubbling the event to the original <select> (function () {
var n = $ (this). index ();
Select.selectedindex = n;
Input.val (Select.options[n].text);
Div.hide ();
$ (select). Change ();

Here we judge a special class name "Noscroll"
When too many items are selected, the default is to have scroll bars in the list of options, but if there are. Noscroll adornments, the scroll bars are not enforced
var noscroll = (Select.options.length < | | $ (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?) "10000px": "215px");

Here we judge a special class name "onside"
If there is a. Onside modifier, the pop-up option layer will be on the side, otherwise it is below
Note: here to use 2 functions locatebeside and Locatebelow is my JS library method, a little wait for another
$ (select). Hasclass ("onside")
? Div.locatebeside (This,-2)
: Div.locatebelow (this,-4);

Do some smart tuning on repetitive clicks <input> things like that
if (Window.activedummyselect = = Select) {
Div.slidetoggle (100);
} else {
Div.hide (). Slidedown (100);
Window.activedummyselect = select;

In the case of a scroll bar, we need to scroll the scroll bar to the position of the currently selected item.
if (!select.selectedindex > 6 && div[0].scrollheight > Div.height ()) {
Div.scrolltop ((select.selectedindex-3) * div[0].firstchild.offsetheight);

Finally, don't forget: When you click on the free area of the page, you should hide the <div #dummydata >
$ (document). Click (function (e) {
if (!$ ( is (". Dummy") &&!$ ( Is ("#dummydata")) {
$ ("#dummydata"). Hide ();

The above code said that the use of 2 methods: Locatebeside and Locatebelow, is my JS Library of the expansion of JQuery, by the way to give more than 2 methods locate and Locatecenter

The code is as follows Copy Code

$.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 =;
if ($ (document). Width () < x + W2) {
x = p.left-w2-5-(Adjustx | | 0);
if ($ (document). Height () < Y + H2) {
y = + H2 +-$ (document). Height ());
return this.locate (x, y);
Locatebelow:function (el, Adjusty) {
var p = $ (EL). Offset ();
Return This.locate (P.left, + $ (EL). Outerheight () + 3 + (Adjusty | | 0));
Locatecenter:function () {
Return This.locate (
($ (window). Width ()-this.width ())/2,
($ (window). Height ()-this.height ())/2 + $ (document). ScrollTop ()

Finally, some examples of style sheet definitions are given, as well as demonstration effects:

The code is as follows Copy Code

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; ove Rflow: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 effect chart above

The style-defined effect chart above

To do in HTML, just add a few class modifiers


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.