首页 web前端 js教程 一个简单的jquery的多选下拉框(自写)_jquery

一个简单的jquery的多选下拉框(自写)_jquery

May 16, 2016 pm 04:50 PM
jquery

今天做的项目要用到多选的下拉框,开始想在网上找一个插件用用,可是,网上的插件看起来都比较杂乱,我参考了网上的一些插件,自己用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 = $("
").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);

html
复制代码 代码如下:
















需要jquery类库
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

两个点博物馆:邦格荒地地点指南
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

两个点博物馆:邦格荒地地点指南
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

jQuery引用方法详解:快速上手指南 jQuery引用方法详解:快速上手指南 Feb 27, 2024 pm 06:45 PM

jQuery引用方法详解:快速上手指南

jQuery中如何使用PUT请求方式? jQuery中如何使用PUT请求方式? Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式?

jQuery如何移除元素的height属性? jQuery如何移除元素的height属性? Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height属性?

jQuery小技巧:快速修改页面所有a标签的文本 jQuery小技巧:快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

jQuery小技巧:快速修改页面所有a标签的文本

深度剖析:jQuery的优势与劣势 深度剖析:jQuery的优势与劣势 Feb 27, 2024 pm 05:18 PM

深度剖析:jQuery的优势与劣势

使用jQuery修改所有a标签的文本内容 使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

使用jQuery修改所有a标签的文本内容

了解jQuery中eq的作用及应用场景 了解jQuery中eq的作用及应用场景 Feb 28, 2024 pm 01:15 PM

了解jQuery中eq的作用及应用场景

PHP常用的文件操作函数总结 PHP常用的文件操作函数总结 Apr 03, 2024 pm 02:52 PM

PHP常用的文件操作函数总结

See all articles