【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 };
文档来源：51CTO技术博客https://blog.51cto.com/u_9955199/3225794
页:
[1]