【jQuery系列之插件】jQuery插件---exselect实现联动
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>cxSelect 联动下拉菜单 </title>
<style>
body{background:#ddd;font:14px/1.7 tahoma,'\5fae\8f6f\96c5\9ed1',sans-serif;}
fieldset{margin:2em 0;}
fieldset legend{font-weight:bold;font-size:16px;line-height:2;}
select,button{padding:0.5em;}
.wrap{width:900px;margin:0 auto;padding:20px 50px;border-radius:8px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,0.2);}
</style>
</head>
<body>
<div class="wrap">
<fieldset>
<legend>级联测试</legend>
<div id="api_data">
<dl>
<dt>选择器组 A</dt>
<dd>
<span>第一级</span> <select class="first select"></select>
<span>第二级</span> <select class="second select"></select>
<span>第三级</span> <select class="thrid select"></select>
</dd>
</dl> </div>
</fieldset> </div> <script src="http://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.cxselect.js"></script>
<script>
(function() {
var dataCustom = [
{'v': '1', 'n': '第一级 >', 's': [
{'v': '2', 'n': '第二级 >', 's': [
{'v': '3', 'n': '第三级 >', 's': [
{'v': '4', 'n': '第四级 >', 's': [
{'v': '5', 'n': '第五级 >', 's': [
{'v': '6', 'n': '第六级 >'}
]}
]}
]}
]}
]},
{'v': 'test number', 'n': '测试数字', 's': [
{'v': 'text', 'n': '文本类型', 's': [
{'v': '4', 'n': '4'},
{'v': '5', 'n': '5'},
{'v': '6', 'n': '6'},
{'v': '7', 'n': '7'},
{'v': '8', 'n': '8'},
{'v': '9', 'n': '9'},
{'v': '10', 'n': '10'}
]},
{'v': 'number', 'n': '数值类型', 's': [
{'v': 11, 'n': 11},
{'v': 12, 'n': 12},
{'v': 13, 'n': 13},
{'v': 14, 'n': 14},
{'v': 15, 'n': 15},
{'v': 16, 'n': 16},
{'v': 17, 'n': 17}
]}
]},
{'v': '' , 'n': '无子级'}
]; // API 接口
var apiBox = $('#api_data');
var cxSelectApi; apiBox.cxSelect({
selects: ['first', 'second', 'thrid'] //下拉选择框组,输入select的class属性
}, function(api) {
cxSelectApi = api;
}); $(".first").on('mouseover',function(){
cxSelectApi.setOptions({
data: dataCustom
});
}) })();
</script>
</body>
</html>
项目中应用:
<script>
(function() {
var dataCustom = [
{'v': '1', 'n': '岗位调动', 's': [
{'v': 4, 'n': '平调'},
{'v': 5, 'n': '升级'},
{'v': 6, 'n': '降级'},
]},
{'v': '2', 'n': '辞职', 's': [
{'v': 7, 'n': '岗位原因'},
{'v': 8, 'n': '居住环境'},
{'v': 9, 'n': '工作原因'},
{'v': 10, 'n': '薪酬原因'},
{'v': 11, 'n': '职业发展'},
{'v': 12, 'n': '个人原因'},
{'v': 13, 'n': '其他'}
]},
{'v': '3', 'n': '解聘', 's': [
{'v': 11, 'n': '能力不足'},
{'v': 12, 'n': '违反公司规章制度'},
{'v': 13, 'n': '业务调整'},
{'v': 14, 'n': '违法犯罪'},
{'v': 15, 'n': '其他'}
]}
]; var apiBox = $('#type_reason');
var cxSelectApi; apiBox.cxSelect({
selects: ['first', 'second']
}, function(api) {
cxSelectApi = api;
}); $(".first").on('mouseover',function(){
cxSelectApi.setOptions({
data: dataCustom
});
}) })();
</script>
我们还可以在cxSelectApi.setOptions({
data:dataCustom,
jsonValue: 'v'
})
来设置选项的value值,如果不设置的话会默认使用jsonName作为jsonValue。
可用的选项有:
$.cxSelect.defaults = {
selects: [], // 下拉选框组
url: null, // 列表数据文件路径(URL)或数组数据
data: null, // 自定义数据
emptyStyle: null, // 无数据状态显示方式
required: false, // 是否为必选
firstTitle: '请选择', // 第一个选项的标题
firstValue: '', // 第一个选项的值
jsonSpace: '', // 数据命名空间
jsonName: 'n', // 数据标题字段名称
jsonValue: '', // 数据值字段名称
jsonSub: 's' // 子集数据字段名称
};
【jQuery系列之插件】jQuery插件---exselect实现联动的更多相关文章
- jQuery系列 第一章 jQuery框架简单介绍
第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...
- jQuery系列 第二章 jQuery框架使用准备
第二章 jQuery框架使用准备 2.1 jQuery框架和JavaScript加载模式对比 jQuery框架的加载模式 <script> window.onload = function ...
- 【Jquery系列】之Jquery 选择器
1 概述 本篇文章为穿插文章,ASP.NET MVC系列目前写了如下几篇: 详解google Chrome浏览器(理论篇) 详解Google Chrome浏览器(操作篇)(上) 详解Google ...
- jQuery系列 第八章 jQuery框架Ajax模块
第八章 jQuery框架Ajax模块 8.1 jQuery框架中的Ajax简介 Ajax技术的核心是XMLHTTPRequest对象,该对象是Ajax实现的关键,发送异步请求.接收服务器端的响应以及执 ...
- jquery系列教程7-自定义jquery插件全解:对象函数、全局函数、选择器
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- jQuery插件---exselect实现联动
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- flot - jQuery 图表插件(jquery.flot)使用
Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 特别注意Flot使用的是UTC时间,最好修改flot.js去掉所有的UTC ...
- jQuery 版本选择与常见插件库总结
在日常的开发中jQuery作为一个流行多年的轻量级 JavaScript 库,使用十分的普遍,主要源于它的便捷性和实用性非常高. 在此总结一些关于jQuery版本的区别和选择的建议,以及一些常见插件库 ...
- JQuery模板插件-jquery.tmpl
转载:https://www.cnblogs.com/whitewolf/archive/2011/10/09/2204185.html 在下面介绍一款jQuery的模板插件 tmpl,是由微软想jQ ...
随机推荐
- 统一处理jquery ajax请求过程中的异常错误信息的机制
当jQuery ajax向服务器发送请求,服务器发生异常,比如:400.403.404.500等异常,服务器将异常响应给客户端,此时的ajax可以获取异常信息并进行处理,但此时我们一般是跳转到与异常编 ...
- kernel headers
linux/delay延迟相关函数,长延时ssleep msleep(睡眠等待),短延时mdelay udelay(忙等待) linux/sched.h进程相关的头文件, struct task_st ...
- cat /etc/init.d/nfs 这句话看不懂
if status rpc.mountd > /dev/null ; then exit 0 fi Linux非root用户程序使用小于1024端口 在Linux下,默认端口1024下的是 ...
- MVC教程一:MVC简介
一.概述 1.MVC是一种流行的Web应用架构技术,他把Web应用划分成Model(模型).Controller(控制器)和View(视图)三部分. 2.优点:可测试.可维护 3.MVC是ASP.NE ...
- 配置QQ企业邮箱小结
https://exmail.qq.com/login 1,注册管理员账号 2,添加域名 3.设置MX记录 记录类型选:MX记录 主机记录(RR):不填(非万网可以填写@) 记录值与MX优先级分别为: ...
- Cygwin镜像使用帮助
Cygwin镜像使用帮助 收录架构 x86 x86_64 收录版本 所有版本 更新时间 每12小时更新一次 使用说明 选择从互联网安装, 在"User URL"处输入以下地址 ...
- [oracle] oracle的三种密码验证机制以及在windows和linux下的不同启动过程
oracle数据库的密码验证机制: ① 操作系统验证 拥有SYSDBA和SYSOPER的用户用该方式验证此时数据库无需启动,也无需开启监听和实例服务. 要求:本地组ora_dba中有该操作系统的登录用 ...
- UML总结---UML九种图关系说明
UML中包括九种图:用例图.类图.对象图.状态图.时序图.协作图.活动图.组件图.配置图. 1)用例图(Use Case Diagram) 它是UML中最简单也是最复杂的一种图.说它简单是因为它采用了 ...
- 比較JS合并数组的各种方法及其优劣
原文链接: Combining JS Arrays原文日期: 2014-09-09翻译日期: 2014-09-18翻译人员: 铁锚 本文属于JavaScript的基础技能. 我们将学习结合/合并两个 ...
- circRNA 序列提取中的难点
在预测circRNA时,都是检测breakpoint 处的reads 数,最后给出的环状RNA的ID 都是诸如 chr14:106994222-107183708 这样的形式,给出了起始和终止位置: ...