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

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

WBOY
WBOYOriginal
2016-05-16 16:50:001290browse

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
Statement:
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