【jQuery系列之插件】jQuery插件---exselect实现联动
2024-08-24 21:30:03
<!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' // 子集数据字段名称
};
最新文章
- JS基本概念
- ERROR 2049 (HY000): Connection using old (pre-4.1.1) authentication protocol refused (client option &#39;secure_auth&#39; enabled)
- EmberJs之Ember-Data
- 洛谷P2925 [USACO08DEC]干草出售Hay For Sale
- Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all the values along the path equals the given sum. For example: Given the below binary tree andsum =
- java基础之 switch
- IIS OCIEnvCreate failed with return code -1
- ESB 客户端调用 处理类
- -_-#【JS】defer / async
- Php 操作事务
- MAC上安装Homebrew、Nginx、PHP、MySQL
- Web前端新人笔记之CSS结构和层叠
- 关于typedef的用法总结
- AFNetworking2.0后 进行Post请求
- 持续集成:TestNG中case之间的关系
- C#的发展历程第五 - C# 7开始进入快速迭代道路
- 从 RegExp 构造器看 JS 字符串转义设计
- 34 文件地理数据库(GDB)变文件夹了怎么办
- Django数据库,在原有表中添加新字段
- linux运维工作内容及岗位要求
热门文章
- Oracle主表列表上显示从表字段拼成的字符串
- 模仿Struts2的Interceptor拦截器实现
- LPD打印机服务是什么意思
- python三大神器之virtualenv pip, virtualenv, fabric通称为pythoner的三大神器。
- Beego 框架学习(一)
- Arraylist静态初始化
- jquery easyui datagrid 动态 加载列
- [Spring] Java spring quartz 定时任务
- 关于Cocos2d-x事件处理机制
- com.sun.awt.AWTUtilities.setWindowOpacity相关说明