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)