간단한 jquery 다중 선택 드롭다운 상자(자체 작성)_jquery
- WBOY원래의
- 2016-05-16 16:50:001309검색
오늘 작업한 프로젝트는 다중 선택 드롭다운 상자를 사용해야 했는데 처음에는 인터넷에서 플러그인을 찾아 사용하려고 했으나 인터넷에 있는 플러그인이 꽤 지저분해 보였습니다. 인터넷에 있는 몇몇 플러그인을 참고해서 jquery를 이용해 다중 선택 플러그인을 작성했습니다. 드롭다운 상자는 js로 비교적 간결하게 작성되어 있습니다. 코드는 다음과 같습니다.
js 코드
코드 복사 코드는 다음과 같습니다.
( 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=$("
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("값");
}
});
jq_check.attr("value",temp)
e.stopPropagation()
>}) ;
}else{
jq_checks_select.toggle();
}
e.stopPropagation()
}); (function ( ) {
jq_checks_select.hide();
})
//$(this).blur(function(){
//jq_checks_select.css("visibility"," 숨겨진") ;
//alert();
//});
}
})
})(jQuery);
html
$.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("값");
}
});
jq_check.attr("value",temp)
e.stopPropagation()
>}) ;
}else{
jq_checks_select.toggle();
}
e.stopPropagation()
}); (function ( ) {
jq_checks_select.hide();
})
//$(this).blur(function(){
//jq_checks_select.css("visibility"," 숨겨진") ;
//alert();
//});
}
})
})(jQuery);
html
코드 복사 코드는 다음과 같습니다.