Heim > Web-Frontend > js-Tutorial > Eine einfache JQuery-Dropdown-Box mit Mehrfachauswahl (selbst geschrieben)_jquery

Eine einfache JQuery-Dropdown-Box mit Mehrfachauswahl (selbst geschrieben)_jquery

WBOY
Freigeben: 2016-05-16 16:50:00
Original
1332 Leute haben es durchsucht

Das Projekt, an dem ich heute arbeitete, erforderte die Verwendung einer Dropdown-Liste mit mehreren Auswahlmöglichkeiten. Ich wollte zunächst ein Plug-in im Internet finden, um es zu verwenden Ich habe auf einige Plug-Ins im Internet verwiesen und mit jquery ein Multi-Select-Plug-In geschrieben. Das Dropdown-Feld ist relativ prägnant in js geschrieben. Der Code lautet wie folgt.

JS-Code

Code kopieren Der Code lautet wie folgt:

( 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(t)); >}) ;
}else{
jq_checks_select();

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

})(jQuery);


html



Code kopieren
Der Code lautet wie folgt: /javascript" src=" js/jquery2.1.js">
style>
.checks_div_select {
width: 150px;
border: 1px solid #18cbcd;
Schriftgröße: 12px
links:25px
>






Erfordert eine JQuery-Bibliothek
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage