jquery多选下拉框实例__jq_checks_select_function_jq_check_attr_this_

当前位置: 编程技术>jquery

jquery多选下拉框实例

来源: 互联网发布时间：2014-10-04

本文导语: 项目要用到多选的下拉框，网上找的插件看起来都比较杂乱，参考了网上的一些插件，自己用jquery写了一个多选下拉框，js写得比较简洁。 1，jquery多选下拉框的代码。代码示例: (function(){ $.fn.extend({ checks_select: function(opt...

项目要用到多选的下拉框，网上找的插件看起来都比较杂乱，参考了网上的一些插件，自己用jquery写了一个多选下拉框，js写得比较简洁。

1，jquery多选下拉框的代码。

代码示例:

(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 = $("

").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);
e.stopPropagation();
});
});
}else{
jq_checks_select.toggle();

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

})(jQuery);

2，html部分

代码示例:

$(document).ready(function(){ 

var options = { 

1: "第一个选择项", 

2: "第二个选择项", 

3: "第三个选择项", 

4: "第四个选择项", 

5: "第五个选择项", 

6: "第六个选择项" 

}; 

$("#test_div").checks_select(options); 

}); 

.checks_div_select { 

width: 150px; 

background-color: #e9fbfb; 

border: 1px solid #18cbcd; 

font-family: 'Verdana', '宋体'; 

font-size: 12px; 

position:absolute; 

left:2px; 

top:25px; 

}