当前位置: 编程技术>jquery
jquery 多选下拉列表框插件
来源: 互联网 发布时间：2014-10-04
本文导语: 自己写的jquery 多选下拉列表框插件。 1，js代码部分 代码示例: /** * linkbutton 1.0 - jQuery Plug-in * * Copyright 2011 mahsky [ mahsky@qq.com ] * */ (function(){ $.fn.extend({ checks_select: function(options)...
自己写的jquery 多选下拉列表框插件。
1，js代码部分
代码示例:
/**
* linkbutton 1.0 - jQuery Plug-in
*
* Copyright 2011 mahsky [ mahsky@qq.com ]
*
*/
(function(){
$.fn.extend({
checks_select: function(options){
//鼠标进入事件
$(this).click(function(){
jq_check = $(this);
jq_check.attr("class", "");
div_children = jq_check.children();
//判断是否是初始化过,初始化过直接显示就可以了。
if (div_children.length 0) {
jq_checks_select = div_children[1];
$(jq_checks_select).hide();
}
});
},
get_checks_value: function(){
jq_check = $(this);
div_children = jq_check.children();
jq_checks_select = div_children[1];
//进行数据赋值
div_input = $(jq_checks_select).children();
v_input = " ";
$.each(div_input, function(i, n){
o_input = $(div_input[i]).children()[0];
if ($(o_input).attr("checked") == true) {
v_input += $(o_input).val() + ",";
}
});
return v_input;
}
})
})(jQuery);
* linkbutton 1.0 - jQuery Plug-in
*
* Copyright 2011 mahsky [ mahsky@qq.com ]
*
*/
(function(){
$.fn.extend({
checks_select: function(options){
//鼠标进入事件
$(this).click(function(){
jq_check = $(this);
jq_check.attr("class", "");
div_children = jq_check.children();
//判断是否是初始化过,初始化过直接显示就可以了。
if (div_children.length 0) {
jq_checks_select = div_children[1];
$(jq_checks_select).hide();
}
});
},
get_checks_value: function(){
jq_check = $(this);
div_children = jq_check.children();
jq_checks_select = div_children[1];
//进行数据赋值
div_input = $(jq_checks_select).children();
v_input = " ";
$.each(div_input, function(i, n){
o_input = $(div_input[i]).children()[0];
if ($(o_input).attr("checked") == true) {
v_input += $(o_input).val() + ",";
}
});
return v_input;
}
})
})(jQuery);
2，html内容部分
代码示例:
$(document).ready(function(){
var options = {
1: "第一个选择项",
2: "第二个选择项",
3: "第三个选择项",
4: "第四个选择项",
5: "第五个选择项",
6: "第六个选择项"
};
var options1 = {
1: "第1个选择项",
2: "第2个选择项",
3: "第3个选择项",
4: "第4个选择项",
5: "第5个选择项",
6: "第6个选择项"
};
var options2 = {
1: "第a个选择项",
2: "第b个选择项",
3: "第c个选择项",
4: "第d个选择项",
5: "第e个选择项",
6: "第f个选择项"
};
$("#test_div").checks_select(options);
$("#test_div1").checks_select(options1);
$("#test_div2").checks_select(options2);
});
function demo1(id){
str = $("#"+id).get_checks_value();
alert(str);
}
多选下拉列表框
效果图，如下：
附，完整代码下载。
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。