Code for simulating the select statement

Source: Internet
Author: User

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

Related Article

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: info-contact@alibabacloud.com 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.