【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   };

 

posted @ 2016-09-28 16:37  霓裳梦竹  阅读(338)  评论(0)    收藏  举报