【jQuery系列之插件】jQuery插件---exselect实现联动
2016-09-28 16:37
387 查看
<!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实现的多选框多级联动插件
- 用jQuery实现省市区三级联动(可做插件)
- 地址联动jquery插件的实现
- jQuery插件实现多级联动菜单效果
- jquery实现省市县三级联动的jQuery插件
- jQuery插件实现多级联动菜单效果
- JS+JQuery实现前端省、市、区三级联动(插件)
- 基于GoogleMap,Mapabc,51ditu,VirtualEarth,YahooMap Api接口的Jquery插件的通用实现(含源代码下载)
- jquery插件jCarouselLite实现图片无缝滚动
- jquery学习笔记-jquery实现无刷新联动
- jQuery 表单验证插件formValidation实现个性化错误提示
- 利用Jquery的cropper插件实现拖动层动态头剪切(裁剪头像)图片
- JQuery Jcrop 实现图片裁剪的插件
- 在asp.net中使用JQuery的SlideViewer插件实现图片的滚动效果
- jQuery实现圆角形状的一个插件
- 利用Jquery中的pagination插件实现无刷新的分页
- jQuery实现AJAX插件
- jQuery插件JQuery Pager分页器实现javascript分页功能
- 用jQuery和jTemplates插件实现客户端分页的表格展现