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


Posted in Javascript onMay 05, 2014

今天做的项目要用到多选的下拉框,开始想在网上找一个插件用用,可是,网上的插件看起来都比较杂乱,我参考了网上的一些插件,自己用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 = $("<div class='checks_div_select'></div>").insertAfter(jq_check); 
$.each(options, function(i, n){ 
check_div=$("<div><input type='checkbox' value='" + n + "'>" + n + "</div>").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
<html> 
<head> 
<script type="text/javascript" src="js/jquery-1.3.2.js"> 
</script> 
<script type="text/javascript" src="js/jquery2.1.js"> 
</script> 
<script type="text/javascript" src="js/jquery-mah-UI.js"> 
</script> 
<script language="javascript"> 
$(document).ready(function(){ 
var options = { 
1: "第一个选择项", 
2: "第二个选择项", 
3: "第三个选择项", 
4: "第四个选择项", 
5: "第五个选择项", 
6: "第六个选择项" 
}; 
$("#test_div").checks_select(options); 
}); 
</script> 
<style> 
.checks_div_select { 
width: 150px; 
background-color: #e9fbfb; 
border: 1px solid #18cbcd; 
font-family: 'Verdana', '宋体'; 
font-size: 12px; 
position:absolute; 
left:2px; 
top:25px; 
} 
</style> 
</head> 
<body> 
<div style="position:relative;"> 
<input type="text" id="test_div"/> 
</div> 
</body> 
</html>

需要jquery类库
Javascript 相关文章推荐
利用location.hash实现跨域iframe自适应
May 04 Javascript
javascript中callee与caller的用法和应用场景
Dec 08 Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
创建nuxt.js项目流程图解
Mar 13 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 Javascript
JavaScript日期时间格式化函数分享
May 05 #Javascript
js中substring和substr的定义和用法
May 05 #Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 #Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 #Javascript
js简单的弹出框有关闭按钮
May 05 #Javascript
JavaScript保留两位小数的2个自定义函数
May 05 #Javascript
JS判断、校验MAC地址的2个实例
May 05 #Javascript
You might like
php 数组的一个悲剧?
2011/05/11 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
动态表格Table类的实现
2009/08/26 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
Python计算程序运行时间的方法
2014/12/13 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
Python图像灰度变换及图像数组操作
2016/01/27 Python
学习Django知识点分享
2019/09/11 Python
python列表推导式入门学习解析
2019/12/02 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
python字符串判断密码强弱
2020/03/18 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
Python快速实现一键抠图功能的全过程
2021/06/29 Python