【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>
项目中应用:
1 <script> 2 (function() { 3 var dataCustom = [ 4 {'v': '1', 'n': '岗位调动', 's': [ 5 {'v': 4, 'n': '平调'}, 6 {'v': 5, 'n': '升级'}, 7 {'v': 6, 'n': '降级'}, 8 ]}, 9 {'v': '2', 'n': '辞职', 's': [ 10 {'v': 7, 'n': '岗位原因'}, 11 {'v': 8, 'n': '居住环境'}, 12 {'v': 9, 'n': '工作原因'}, 13 {'v': 10, 'n': '薪酬原因'}, 14 {'v': 11, 'n': '职业发展'}, 15 {'v': 12, 'n': '个人原因'}, 16 {'v': 13, 'n': '其他'} 17 ]}, 18 {'v': '3', 'n': '解聘', 's': [ 19 {'v': 11, 'n': '能力不足'}, 20 {'v': 12, 'n': '违反公司规章制度'}, 21 {'v': 13, 'n': '业务调整'}, 22 {'v': 14, 'n': '违法犯罪'}, 23 {'v': 15, 'n': '其他'} 24 ]} 25 ]; 26 27 var apiBox = $('#type_reason'); 28 var cxSelectApi; 29 30 apiBox.cxSelect({ 31 selects: ['first', 'second'] 32 }, function(api) { 33 cxSelectApi = api; 34 }); 35 36 $(".first").on('mouseover',function(){ 37 cxSelectApi.setOptions({ 38 data: dataCustom 39 }); 40 }) 41 42 })(); 43 </script>
我们还可以在cxSelectApi.setOptions({
data:dataCustom,
jsonValue: 'v'
})
来设置选项的value值,如果不设置的话会默认使用jsonName作为jsonValue。
可用的选项有:
1 $.cxSelect.defaults = { 2 selects: [], // 下拉选框组 3 url: null, // 列表数据文件路径(URL)或数组数据 4 data: null, // 自定义数据 5 emptyStyle: null, // 无数据状态显示方式 6 required: false, // 是否为必选 7 firstTitle: '请选择', // 第一个选项的标题 8 firstValue: '', // 第一个选项的值 9 jsonSpace: '', // 数据命名空间 10 jsonName: 'n', // 数据标题字段名称 11 jsonValue: '', // 数据值字段名称 12 jsonSub: 's' // 子集数据字段名称 13 };
转载于:https://www.cnblogs.com/dream-to-pku/p/5916939.html
【jQuery系列之插件】jQuery插件---exselect实现联动相关推荐
- 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系列(七) 常用插件
引言: 工欲善其事必先利其器--论语.学会使用工具,提高的不仅仅是效率,还节省你的时间去做更多的事情. 概述: 本篇博客,小编为大家简单介绍几种使用频繁的jQuery插件.先说说什么插件,插件是一种遵 ...
- JQuery模板插件jquery.tmpl-动态ajax扩展
在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以 ...
- jquery上传图片本地预览插件V1.2
v1.2 1.修复jquery版本高于1.9,插件报错BUG. 2.提供未压缩代码. 插件支持IE全系列 谷歌 火狐 等浏览器 注意:不支持safari 插件使用说明: 1.必须引用jquery ...
- flot - jQuery 图表插件(jquery.flot)使用
Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 它的特点是使用简单.图形美观,支持鼠标跟踪及缩放功能. Flot是基于ca ...
- flot - jQuery 图表插件(jquery.flot)使用-2
Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 它的特点是使用简单.图形美观,支持鼠标跟踪及缩放功能. Flot是基于ca ...
- 分享一款超棒的jQuery旋钮插件 - jQuery knob
转自:http://www.cnblogs.com/gbin1/archive/2012/05/08/2489908.html 在线演示 本地下载 如果你也在寻找一款生成漂亮旋钮(knob)的jQu ...
- 自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)
这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 当你用$.load("dir/my-pa ...
最新文章
- Winio驱动在64位windows下无法使用的解决方法
- pandas groupby
- Storybord切换
- 解决客户端从服务器请求数据乱码问题
- C语言实用算法系列之学生管理系统_对整个结构体操作_选择排序_提取排序规则
- TextBox禁止手动输入但是允许刷卡输入
- 五分钟学会python_关于五分钟学Python系列视频
- C# 在线培训之零基础入门 01:开篇及C#程序、解决方案的结构
- OWA2003隐藏附件病毒提示的方法
- LeetCode 145. 二叉树的后序遍历(递归)(迭代)(颜色标记法)
- 基于端到端深度强化学习的柔性作业车间调度问题研究
- 基于jsp的新闻发布系统
- 分布式、分布式系统、分布式计算、分布式存储
- android 工程模式mtk,Android L版本上user版本工程模式中gsensor校准失败
- SQLServer 2008以上误操作数据库恢复方法——日志尾部备份
- 时下最火的网络视频编码器传输技术
- Clion远程Linux开发调试环境搭建
- 做模具用计算机做什么的,一种工业用计算机壳体模具的制作方法
- 从语义网的角度看聊天机器人的产生
- python 读取合并单元格的数据_Python使用xlrd实现读取合并单元格
热门文章
- 关于jrebel碰到的一次问题记录
- C# 对象与JSON串互相转换
- 修改citrix 默认侦听端口的命令和XML Service端口
- html中dd dt的效果,html中dt dd
- python 波形发生_事件与信号
- 全国计算机等级考试题库二级C操作题100套(第55套)
- android 系统gpu 调试_【资讯】高通公布首批可OTA更新GPU驱动手机:谷歌Pixel 4/三星S10在列...
- python组合数据分类_Python 数据可视化:分类特征统计图
- rsa加密c语言源码库,RSA加密算法源代码C语言实现.doc-资源下载在线文库www.lddoc.cn...
- java collection api_Java Stream和Collection比较:何时以及如何从Java API返回?