JQUERY+CSS implementation drop-down list (update)

Source: Internet
Author: User
Tags prev

I. Overview

The drop-down list implemented by JQUERY+CSS is more flexible than the Select drop-down list, and the second part of the code is the implementation of the drop-down list.

Second, the Code

The drop-down list works as follows:

The options for the drop-down list are dynamic append, using the On method, the event delegation mechanism, and the response option for the Click event.

After testing, the following code will work correctly in Firefox 55.0 and Safari 10.1.1.

Description: This update adds scroll bars to the dropdown option compared to previous versions.

Note: Make sure that jquery is working properly.

<! DOCTYPE html>

<meta charset= "UTF-8" >

<title>selector</title>

<style type= "Text/css" >

. Hide {

Display:none;

}

div {

Float:left;

width:100%;

}

. selector-containter {

margin-bottom:10px;

}

. selector {

width:200px;

Background: #FFF;

border:1px solid #DDD;

}

. selector Div {

height:20px;

line-height:20px;

padding:10px 0 10px 0;

}

. selector-hint {

width:158px;

border:1px solid #DDD;

border-right:0px;

}

. selector-expand {

width:38px;

border:1px solid #DDD;

Text-align:center;

}

. selector-collapse {

width:38px;

border:1px solid #DDD;

Text-align:center;

}

. selector-option-container {

width:200px;

height:80px!important;

padding:0px!important;

OVERFLOW-Y: scroll;

}

. Selector-option-container Div {

border-bottom:1px solid #E8E8E8;

}

. selector-option {

width:160px;

Height:auto;

min-height:20px;

}

. selector-checkbox-container {

width:18px;

}

. selector-checkbox {

height:12px;

padding:0;

margin:0;

}

</style>

<script src= "Jquery-3.2.1.min.js" ></script>

<script>

$ (document). Ready (function () {

$ ('. Selector '). Append (' <div class= "selector-hint" >select fruit</div> ');

$ ('. Selector '). Append (' <div class= "Selector-expand" >+</div> ");

$ ('. Selector '). Append (' <div class= "selector-collapse Hide" >-</div> ");

$ ('. Selector '). Append (' <div class= "Selector-option-container Hide" ></div> ");

Using the on method, the event delegation mechanism is used, and the content in the Selector-option-container is appended dynamically.

$ ('. Selector '). On (' click ', '. Selector-expand ', function () {

$ (this). Nextall ('. Selector-option-container '). Children (). remove ();

$ ('. Selector-option-container '). Children (). remove ();

$.each ([' Apricot ', ' banana ', ' pear ', ' melo '], function (index, value) {

$ ('. Selector-option-container '). Append (' <div class= "Selector-checkbox-container" ><input type= "checkbox" Name= "Fruitgroup" class= "Selector-checkbox"/></div><div class= "selector-option" > ' + value + ' </div > ');

});

$ (this). addclass (' hide ');

$ (this). Next (). Removeclass (' hide ');

$ (this). Nextall ('. Selector-option-container '). Removeclass (' hide ');

});

$ ('. Selector '). On (' click ', '. Selector-collapse ', function () {

$ (this). addclass (' hide ');

$ (this). Prev (). Removeclass (' hide ');

$ (this). Nextall ('. Selector-option-container '). addclass (' hide ');

});

$ ('. Selector-t1 '). On (' click ', '. Selector-option ', function () {

$ (this). Parent (). Parent (). Children ('. Selector-hint '). Text ($ (this). text ());

$ (this). Parent (). addclass (' hide ');

$ (this). Parent (). Prev (). addclass (' hide ');

$ (this). Parent (). Prev (). Prev (). Removeclass (' hide ');

});

$ ('. Selector-t1 '). On (' click ', '. Selector-checkbox ', function () {

$ (this). Parent (). Parent (). children ('. Selector-hint '). Text ($ (this). Parent (). Next (). text ());

Use the Prop method to assign a value to a Boolean-valued property

$ (this). Prop (' checked ', false);

$ (this). Parent (). Parent (). addclass (' hide ');

$ (this). Parent (). Parent (). Prev (). addclass (' hide ');

$ (this). Parent (). Parent (). Prev (). Prev (). Removeclass (' hide ');

});

});

</script>

<body>

<div id= "Titan" class= "Selector-containter" >

<div>

<div class= "selector" ></div>

</div>

</div>

<div id= "Athena" class= "Selector-t1 selector-containter" >

<div>

<div class= "selector" ></div>

</div>

</div>

</body>

JQUERY+CSS implementation drop-down list (update)

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.