Maison > interface Web > js tutoriel > 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
Libérer: 2016-05-16 16:50:00
original
1328 Les gens l'ont consulté

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
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal