드롭다운 상자에서 다중 선택을 구현하는 간단한 플러그인은 더 Portable_jquery입니다.

지난번 작성했던 다중 우선 드롭다운 박스를 사용할 때 문제점이 많이 발견되었는데, 수정 및 개선을 거쳐 이제는 잘 사용할 수 있게 되었고 이식성이 좋아진 소스코드는 다음과 같습니다.

js

코드 복사 코드는 다음과 같습니다.

(function (){

$.fn.extend({
checks_select: function(options){
jq_checks_select = null;
$(this).val("---선택하세요- --" );
$(this).next().empty(); //먼저 비우세요
$(this).unbind("click");
$(this).click( function(e ){
jq_check = $(this);
//jq_check.attr("class", "");
if (jq_checks_select == null) {
jq_checks_select = jq_check. next() ;
jq_checks_select.addClass("checks_div_select");
//jq_checks_select = $("

").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( "값") );

temp="";
$(this).parents().find("input:checked").each(function(i){
if( i==0){
temp=$(this).val();
}else{
temp ="," $(this).val();
});
jq_check.val(temp);
e.stopPropagation()
}); jq_checks_select.show ();
}else{
jq_checks_select.toggle();

}
e.stopPropagation()
}); .click( function () {
flag=$("#test_div");
if(flag.val()==""){
flag.val("---선택하세요- --" );
}
jq_checks_select.hide();
});
//$(this).blur(function(){
//jq_checks_select.css(" 가시성", "숨김");
//alert();
//});
}
})

})(jQuery);


html

코드 복사

코드는 다음과 같습니다. < 헤드>