I didn't know where to download the source code a few years ago. I started learning jquery last year and changed it. The Code was a bit messy.
I just use it myself, but I didn't think about writing it as a general component. So it would be a little troublesome for kids to use it.
Several statuses. Expand and collapse is jquery's slide.
This simulation of select only implements some of the functions of a single select.
The text length is not adaptive, for example, optgroup (the image may be difficult to modify)
Besides, if there are multiple select statements on the page, css processing is also troublesome,
A large amount of code is required for data and interaction.
Small has small benefits, so we will not consider encapsulation,
Many children's shoes are better than me and have powerful functions.
In this case, I am just a little lazy. Here I will send js comments to beginners.
Copy codeThe Code is as follows:
$ (Document). ready (function (){
Var newSelect = $ ("# aa ");
NewSelect. click (function (e ){
// If no class exists, that is, close state, expand
// You do not need to process the opening status. The bubble executes document. click.
If (this. className = ""){
This. className = "open ";
$ (This. nextSibling). slideDown ("fast ");
E. stopPropagation (); // prevents bubbling.
}
});
// Close and collapse
Function closeSelect (obj ){
$ (Obj. nextSibling). slideUp ("fast", function (){
Obj. className = "";
});
}
$ (Document). bind ("click", function (){
CloseSelect (newSelect [0]);
});
NewSelect. next (). click (function (e ){
Var src = e.tar get;
// If any item is selected, replace the selected text and change the style, which is equivalent to select. onchange.
// Execute document. click to close the bubble
If (src. tagName = ""){
Var PObj = src. parentNode;
PObj. previussibling. innerHTML = src. innerHTML;
$ (Src). siblings (). removeClass ();
Src. className = "current ";
PObj. nextSibling. value = src. getAttribute ("value ");
}
});
});
Demo address: http://demo.jb51.net/js/2011/jquery_select/
Package download: http://www.jb51.net/jiaoben/39490.html