【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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/283677.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C# 11 中的 required members

C# 11 中的 required membersIntro在 C# 11 中引入了一个新的特性 —— Required Members&#xff0c;引入了一个新的 required 关键词&#xff0c;可以用来表示字段或者属性在类型初始化的时候必须要进行初始化&#xff0c;这一特性也进一步的改进了可空引用类型的用法。Sampl…

架构师速成4.6-软技能和硬技能

架构师速成4.6-软技能和硬技能 在投职和面试的过程中。雇主一般会查看求职者的两种技能&#xff1a;硬技能与软技能。 硬技能就是可以通过培训或可以easy量化的技能。硬技能包含以下这些&#xff1a; 熟练的外语能力文凭或证书打字速度计算机程序编写能力而软技能。则是较难量化…

Netty1:初识Netty

为什么使用Netty Netty是业界最流行的NIO框架之一&#xff0c;它的健壮性、功能、性能、可定制性、可扩展性在同类框架中都是首屈一指的&#xff0c;它已经得到了成百上千的商用项目的证明。对于为什么使用Netty这个话题&#xff0c;我们先看一下使用原生的NIO有什么缺点&#…

互联网大佬简史:马云/雷军/罗永浩/刘强东...

燃财经&#xff08;ID:rancaijing&#xff09;原创 作者 | 杜枫 编辑 | 魏佳中国互联网的发展&#xff0c;是一部由大佬撑起的奋斗史&#xff0c;也是一部由大佬主演的打脸史。和传统行业不同&#xff0c;互联网行业日新月异&#xff0c;从业者趋于年轻。马云唱起了摇滚&#x…

Windows 11 新版 22621.575 和 22622.575 推送:照片、URL、文件资源管理器

面向 Beta 频道的 Windows 预览体验成员&#xff0c;微软推送了 Windows 11 预览版 Build 22621.575 和 22622.575。 目前 Beta 频道 Windows 11 预览版分为两组进行测试&#xff0c;通过两组 Windows 预览体验成员的使用数据和反馈&#xff0c;以更好的测试新功能的可靠性。Wi…

linux mysql5.6 安装

2019独角兽企业重金招聘Python工程师标准>>> 1、gcc yum install gcc gcc-c ncurses-devel perl 2、cmake安装 wget http://www.cmake.org/files/v2.8/cmake-2.8.10.2.tar.gz tar -xzvf cmake-2.8.10.2.tar.gz cd cmake-2.8.10.2 ./bootstrap ; make ; make insta…

学习进度条第十周

第十周 所花时间 15小时 代码量 500行左右 博客量 1 了解到的知识点 学习安卓开发的环境配置&#xff0c;进行简单的开发。重行复习了数据结构的部分算法转载于:https://www.cnblogs.com/liulitianxia/p/6822919.html

基于DeepConvLSTM的传感器信号分类

随机智能手机的普及&#xff0c;在日常生活中&#xff0c;大多数人在做任何事情的时候&#xff0c;都会随身携带手机。如果开启手机中的传感器&#xff0c;当用户运动时&#xff0c;就可以采集大量的用户信息&#xff0c;根据这些信息&#xff0c;就可以判断当前用户的运动模式…

Python常用的12个GUI框架

Graphical User Interface&#xff0c;简称 GUI&#xff0c;又称图形化用户接口&#xff0c;所谓的GUI编程&#xff0c;指的是用户不需要输入代码指令&#xff0c;只通过图形界面的交互就可以操作软件功能。 1.Tkinter 一个轻量级的跨平台图形用户界面&#xff08;GUI&#xff…

PHP下操作Linux消息队列完成进程间通信的方法

2019独角兽企业重金招聘Python工程师标准>>> 来源:http://www.jb51.net/article/24353.htm 关于Linux系统进程通信的概念及实现可查看&#xff1a;http://www.ibm.com/developerworks/cn/linux/l-ipc/   关于Linux系统消息队列的概念及实现可查看&#xff1a;htt…

.NET 7 发布的最后一个预览版Preview 7, 下个月发布RC

微软在2022年8月9日 发布了.NET 7 Preview 7[1]&#xff0c;这是它在11月10日 RTM 之前进入发布候选阶段之前的最后预览版。预览版 7 已在 Visual Studio 17.4 预览版 1 中进行了测试&#xff0c;该预览版也于也与 VS 2022 v17.3 版本一起发布。对于预览版7&#xff0c;开发团队…

2022年全球职业教育行业发展报告

职业教育丨研究报告 核心摘要&#xff1a; 职业教育是职业学校教育与职业培训组成的有机整体&#xff0c;行业参与者除教育培训机构与受训学生外&#xff0c;还涉及企业雇主、行业协会、政府等多方&#xff0c;各群体共同构成密不可分的产业生态。 宏观而言&#xff0c;职业…

C++中STL的一些用法的补充

1 清空vector中的所有元素并释放内存&#xff1a; 1 vector<int*> xx; 2 for(int it0;it!xx.size();it) 3 { 4 delete xx[it]; 5 } 6 xx.clear(); 转载于:https://www.cnblogs.com/jinzhipeng/p/6825585.html

实战Cacti网络监控(1)——基础安装配置

实验环境&#xff1a; 物理主机 redhat7.0 内核版本 3.10.0-123.el7.x86_64 虚拟机 redhat6.5 内核版本 2.6.32-431.el6.x86_64 server10.example.com 172.25.254.10 所需软件包&#xff1a; cacti-0.8.8h.tar.g…

HTTP 3.0为什么彻底放弃TCP

从HTTP/1.0开始&#xff0c;一直到HTTP/2&#xff0c;不管应用层协议如何改进&#xff0c;TCP一直以来都是HTTP协议的基础&#xff0c;主要是因为他能提供可靠连接。 但是&#xff0c;从HTTP 3.0开始&#xff0c;这个情况就有所变化了。 因为&#xff0c;在最新推出的HTTP 3.0中…

《ASP.NET Core 6框架揭秘》实例演示[13]:日志的基本编程模式

《ASP.NET Core 6框架揭秘实例演示[11]&#xff1a;诊断跟踪的几种基本编程方式》介绍了四种常用的诊断日志框架。其实除了微软提供的这些日志框架&#xff0c;还有很多第三方日志框架可供我们选择&#xff0c;比如Log4Net、NLog和Serilog 等。虽然这些框架大都采用类似的设计&…

网络流Dinic算法模板 POJ1273

这就是以后我的板子啦~~~ #include <queue> #include <cstdio> #include <cstring> #include <algorithm> using namespace std; #define N 444 int tot,next[N],first[N],w[N],v[N],n,m,ch[N]; void add(int from,int to,int weight){v[tot]to;w[tot]…

vue-cli 3.0配置webpack目录别名alias

最近用vue脚手架新建工程的时候&#xff0c;发现vue-cli提供的是3.0.0-beta.6版本&#xff0c;安装完成之后也找不到config、build等目录&#xff0c;不懂要从哪里入手配置别名alias 看了下官方文档&#xff0c;简化成使用vue.config.js来配置项目&#xff0c;一路找到了webpac…

Caffine Cache 及在SpringBoot中的使用

这一篇我们将要谈到一个新的本地缓存框架&#xff1a;Caffeine Cache。它也是站在巨人的肩膀上-Guava Cache&#xff0c;借着他的思想优化了算法发展而来。 本篇博文主要介绍Caffine Cache 的使用方式&#xff0c;以及Caffine Cache在SpringBoot中的使用。 1. Caffine Cache 在…

C#深入.NET平台的软件系统分层开发

今天我们来讲讲分层开发&#xff0c;你从标题能不能简单的认识一下什么是分层呢&#xff1f; 不懂也没关系&#xff0c;接下来我来给你讲讲。 第一章 软件系统的分层开发 &#xff08;1&#xff09;其实分层模式可以这样定义&#xff1a;将解决方案中功能不同的模块分到不同的项…