Home > Web Front-end > JS Tutorial > A simple jquery multi-select drop-down box (self-written)_jquery

A simple jquery multi-select drop-down box (self-written)_jquery

WBOY
Release: 2016-05-16 16:50:00
Original
1329 people have browsed it

The project I was working on today required the use of a multi-select drop-down box. I initially wanted to find a plug-in on the Internet to use it. However, the plug-ins on the Internet seemed quite messy. I referred to some plug-ins on the Internet and wrote a multi-select one using jquery. The drop-down box is written in js relatively concisely. The code is as follows.

js code

Copy code The code is as follows:

(function() {
$.fn.extend({
checks_select: function(options){
jq_checks_select = null;
$(this).click(function(e){
jq_check = $( this);
//jq_check.attr("class", "");
if (jq_checks_select == null) {
jq_checks_select = $("
< ;/div>").insertAfter(jq_check);
$.each(options, function(i, n){
check_div=$("
" n "
").appendTo(jq_checks_select);
check_box=check_div.children();
check_box.click(function(e){
/ /jq_check.attr("value",$(this).attr("value") );

temp="";
$("input:checked").each(function(i ){
if(i==0){
temp=$(this).attr("value");
}else{
temp="," $(this).attr ("value");
}
});
jq_check.attr("value",temp);
e.stopPropagation();
});
}) ;
}else{
jq_checks_select.toggle();

}
e.stopPropagation();
});
$(document).click(function ( ) {
jq_checks_select.hide();
});
//$(this).blur(function(){
//jq_checks_select.css("visibility","hidden") ;
//alert();
//});
}
})

})(jQuery);

html
Copy code The code is as follows:















Requires jquery library
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template