首頁 > web前端 > js教程 > 一個簡單的實作下拉框多選的插件可移植性比較好_jquery

一個簡單的實作下拉框多選的插件可移植性比較好_jquery

WBOY
發布: 2016-05-16 16:49:59
原創
950 人瀏覽過

在使用上次寫的一個多先下拉框時,我發現了很多問題,經過修改和完善後,現在已經能夠很好地使用了,且可移植性也比較好,下面是源代碼。

js

複製程式碼 程式碼如下:


程式碼如下:


{

$.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 = jkq_check.next(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("value") );

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

}
e.stopPropagation();
});
$(document).click(function () {
flag=$("#test_div");
if(flag.val()==""){
flag.val("---請選擇---");
}
jq_checks_select.hide();
});
//$(this).blur(function(){
//jq_checks_select.css("visibility","hidden");
//alert();
//});
}
})
})(jQuery); html

複製程式碼


程式碼如下:












一個簡單的實作下拉框多選的插件可移植性比較好_jquery
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板