Maison  >  Article  >  interface Web  >  Une simple liste déroulante à sélection multiple jquery (auto-écrite)_jquery

Une simple liste déroulante à sélection multiple jquery (auto-écrite)_jquery

WBOY
WBOYoriginal
2016-05-16 16:50:001287parcourir

Le projet sur lequel je travaillais aujourd'hui nécessitait l'utilisation d'une liste déroulante à sélection multiple. Au départ, je voulais trouver un plug-in sur Internet pour l'utiliser. Cependant, les plug-ins sur Internet me semblaient assez compliqués. fait référence à certains plug-ins sur Internet et en a écrit un à sélection multiple en utilisant jquery. La liste déroulante est écrite en js de manière relativement concise. Le code est le suivant.

Code js

Copier le code Le code est le suivant :

( 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 ("valeur");
}
});
jq_check.attr("valeur", 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"," caché") ;
//alert();
//});
}
})

})(jQuery);


html


/javascript" src=" js/jquery2.1.js">

style>
.checks_div_select {
largeur : 150px;
couleur de fond : #e9fbfb;
bordure : 1px solide #18cbcd
famille de police : 'Verdana' , '宋体'; <







Nécessite la bibliothèque jquery
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn