一个简单的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 相关文章推荐
JS 实现完美include载入实现代码
Aug 05 Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 Javascript
javascript之bind使用介绍
Oct 09 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 Javascript
详解JS数组方法
Nov 20 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 xml-rpc远程调用
2008/12/19 PHP
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
YII实现分页的方法
2014/07/09 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
鼠标经过的文本框textbox变色
2009/05/21 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
微信小程序表单弹窗实例
2018/07/19 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
python实现基本进制转换的方法
2015/07/11 Python
python 自动去除空行的实例
2018/07/24 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
就业推荐表自我鉴定
2013/10/29 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
医德医风个人总结
2015/02/28 职场文书
绿色环保倡议书
2015/04/28 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
Python如何导出导入所有依赖包详解
2021/06/08 Python
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python