我的第一个jquery插件：下拉多选框
<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
(function ($) {
$.fn.zMultiSelect = function (zSetting, zData) {
//默认设置
var defaultVal = {
json : true,//是否通过json对象导入选项
hasHidden : false,//是否需要隐藏域
hiddenName : "",//隐藏域的name的值
hasAllChecked : true,//是否需要添加全选选项
textSeparator : ";",//文本框中的连接符
valueSeparator : ";"//隐藏域中的连接符
};
//将用户设置与默认设置合并
var setting = $.extend(true,{}, defaultVal, zSetting);
//遍历jquery对象，并返回该jquery对象
return this.each(function () {
var $this = $(this);//当前dom封装成jquery对象
var objId = $this.attr("id");//当前对象的id，也可用this.id来获取
var spanId = objId+"_span";//添加_span后缀做为悬浮框的id
//为当前对象绑定单击事件，先隐藏所有悬浮框，然后显示当前对象关联的悬浮框，并阻断事件继续传播
$this.bind('click',function(e){
$("span[id$=_span]").hide();
$("#"+spanId).show();
e.stopPropagation();//阻断事件传播
});
if(setting.json){
//如果设置json为true，则按设置载入数据，对象前后添加隐藏域和悬浮框
loadJson($this,setting,zData);
}
//为当前对象关联的多选框添加单击事件
$("[class=" + objId + "]:checkbox").bind("click",function(e){
//如果为全选复选框，则相应全选，全不选，相关选项
if(this.value==""){
if(this.checked){
$("[class=" + objId + "]:checkbox").attr("checked", true);
}else {
$("[class=" + objId + "]:checkbox").attr("checked", false);
}
}
//将已选项的值连接起来赋值给文本框和隐藏域
onchangeCheckState($this,setting);
});
//阻止span及其子元素的单击事件传播到document
$("#"+spanId).bind('click',function(e){
e.stopPropagation();//阻断事件传播
});
//单击document时，隐藏所有悬浮框
$(document).bind('click',function(){
$("span[id$=_span]").hide();
});
})
};
//添加悬浮框及隐藏域
function loadJson(obj,setting,zData){
var hasHidden = setting.hasHidden;
var objId = obj.attr("id");
var spanId = objId+"_span";
//--------------------拼接悬浮框span-----------------------------------------------------------
var spanAdd = '<span id="'+spanId+'">';
if(setting.hasAllChecked){
//添加全选选项
spanAdd += '<div cellpadding="0" cellspacing="0" style="width:100%;border-style: none none solid none;border-color:gray;border-width:1px;"><input type="checkbox" id="'+objId + '_all' +'" class="'+objId+'" value=""/>';
spanAdd += '<label for="' + objId + '_all' + '">全选</label></div>';
}
for(var item in zData){
//多选框id，有隐藏域时，为文本框id+_+json对象的属性名，没有隐藏域时，为文本框id+_+json对象的属性值
var checkboxId = (hasHidden) ? (objId + '_' + item) : (objId + '_' + zData[item]);
//多选框的value，根据hasHidden设置为属性名或属性值
var checkboxValue = (hasHidden) ? item : zData[item];
//添加各选项
spanAdd += '<input type="checkbox" id="'+checkboxId+'" class="'+objId+'" value="'+checkboxValue+'"/>';
spanAdd += '<label for="'+checkboxId+'">'+zData[item]+'</label><br>';
}
spanAdd += '</span>';
//--------------------拼接span结束-----------------------------------------------------------
//添加悬浮框
obj.after($(spanAdd));
//为悬浮框添加class设置样式，并隐藏，同时添加mouseover和mouseout事件
$("#"+spanId).addClass("spanFloater").hide().hover(
function(){ $(this).show(); },
function(){ $(this).hide(); }
);
//添加隐藏域
if(hasHidden){
var hiddenId = objId+"_value";//添加_value后缀做为隐藏域的id
var hiddenAdd = '<input type="hidden" id="'+hiddenId+'" name="'+setting.hiddenName+'">';
obj.before($(hiddenAdd));
}
};
//单击复选框事件，为文本框和隐藏域赋值
function onchangeCheckState(obj,setting){
var objId = obj.attr("id");
var hiddenId = objId+"_value";
var kArr = new Array();
var vArr = new Array();
//获取已选项的值，赋值给数组
$("input[class=" + objId + "][value!='']:checked").each(function (index) {
kArr[index] = this.value;
vArr[index] = $(this).next().text();
});
//串联数组，赋值给文本框和隐藏域
if(setting.hasHidden){
$("#"+hiddenId).val(kArr.join(setting.valueSeparator));
}
obj.val(vArr.join(setting.textSeparator));
}
})(jQuery);
$(document).ready(function () {
var setting = {json:true,hasHidden:true,hiddenName:"dict_dim_Level",textSeparator:",",valueSeparator:"-"}
var data = {nanjing:"南京",shanghai:"上海",yangzhou:"扬州",suzhou:"苏州",wuxi:"无锡",changzhou:"常州",yancheng:"盐城",xuzhou:"徐州",taizhou:"泰州",huaian:"淮安"};
$("input").zMultiSelect(setting,data).attr("readonly","readonly");
});
//-->
</script>
<style type="text/css">
.spanFloater{display:block;width:inherit;position: absolute; z-index:10;background:#F0F6E4;border: 1px solid #617775;}
#dim_Level {width:150px}
#dim_Level+span {width:155px}
#dim_Level2 {width:150px}
#dim_Level2+span {width:155px;background:lightgreen;border: 1px solid #617775;font-family: 方正舒体;font-size:25px;}
</style>
</head>
<body>
<table>
<tr>
<td>已覆盖城市：</td>
<td><div><input type="text" id="dim_Level"></div></td>
<td>欲拓展城市：</td>
<td><div><input type="text" id="dim_Level2"></div></td>
</tr>
</table>
</body>
</html>
第一次写jquery插件，有很多粗陋的地方，希望路过的朋友能够指点一二
注：easy ui 中已经有了这样的下拉多选框
我的第一个jquery插件：下拉多选框的更多相关文章
- 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 品优购商城项目（二）AngularJS、自动代码生成器、select2下拉多选框
品优购商城想项目第二阶段 AngularJS.自动代码生成器.select2下拉多选框 完成了课程第三天.第四天的的任务. 1.学习了AngularJs前端的mvc分层思想,js部分分成control ...
- angular2.x 下拉多选框选择组件
angular2.x - 5.x 的下拉多选框选择组件 ng2 -- ng5.最近在学angular4,经常在交流群看见很多人问 下拉多选怎么做... 今天就随便写的个. 组件源码 百度云 链接: ...
- 自己用ul模拟实现下拉多选框，
模拟实现下拉多选框 效果如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 自定义实现 PyQt5 下拉复选框 ComboCheckBox
一.前言 由于最近的项目需要具有复选功能,但过多的复选框会影响界面布局和美观,因而想到把 PyQt5 的下拉列表和复选框结合起来,但在 PyQt5 中并没有这样的组件供我们使用,所以想要自己实现一个下 ...
- jquery--获取多选框的值、获取下拉多选框的值
获取多选框的值 var packageCodeList=new Array(); $('#server_id:checked').each(function(){ packageCodeList.pu ...
- jQuery插件——下拉选择框
其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...
- ios一个自定义的下拉多选菜单
前段时间项目刚好要做到条件筛选菜单,正好找到一些别人写的,结合自己实际需求进行优化修改,一个实用的多条件筛选菜单,根据其他的下拉进行一些改进. 点击后返回点击文字显示 github地址:https:/ ...
- selectpicker下拉多选框ajax异步或者提前赋值=》默认值
Bootstrap select多选下拉框赋值 success: function (data) { var oldnumber = new Array(); $.each(data, functio ...
随机推荐
- 编译linux内核问题
1: openssl/opensslv.h: No such file or directory sudo apt-get install libssl-dev 2:一般配置内核树,需要先make o ...
- 【正则】精通JS正则表达式，没消化 信息量太大，好文
http://www.jb51.net/article/25313.htm 正则表达式可以: •测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用 ...
- Linux C C语言库的创建和调用
C语言库的创建和调用 简介: 假如,你有一个庞大的工程,代码量达到数百兆甚至是数G,你经常会遇到好多重复或常用的地方.每次使用到这些地方时如果都重新写一份基本相同的代码,这当然可以,不过这样会大大地降 ...
- 转载 -- C# 中的委托和事件
原文地址:http://www.tracefact.net/CSharp-Programming/Delegates-and-Events-in-CSharp.aspx C# 中的委托和事件 引言 委 ...
- VBS基础篇 - Err对象
Err对象是一个具有全局范围的内部对象,含有关于错误的所有信息.On Error Resume next 忽略运行时产生的所有错误On Error Goto 0 取消忽略错误措施主要方法有:Clear ...
- VBS基础篇 - 常量
常量:指的是在程序运行过程中其值保持不变的量,它用来保存固定不变的数值,字符串等常数 . 常量的定义:在vbscript中使用使用 Const 指令可以创建名称具有一定含义的字符串型或数值型常量,并给 ...
- Careercup - Facebook面试题 - 5110993575215104
2014-04-30 16:12 题目链接 原题: The beauty of a number X is the number of 1s in the binary representation ...
- Caffe安装教程(原创)
转载请注明地址 说明:本文档参考自Caffe官网的安装说明,http://caffe.berkeleyvision.org/installation.html 如果对安装过程中,需要用到的依赖不明,请 ...
- PVPGN 暗黑破坏神2 1.11b战网配置问题汇总
写了第一篇配置指南之后,很多人向我咨询有关战网搭建的问题.于是觉得很有必要把若干常见的问题,和常用的进阶配置汇总一下,以方便更多人. 1.游戏版本和PVPGN与D2GS版本的问题. PVPGN建议选择 ...
- windows server 2008 下安装openmeetings 2.2.0
经过两天的痛苦经历,终于完成了openmeetings的安装部署.其实步骤都很简单,只是网上的资料都是英文的,而且很多教程都是针对openmeeting之前的版本,导致我在部署的时候走了很多弯路.网上 ...