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

[jQuery] 【jQuery系列之插件】jQuery插件---exselect实现联动

相关帖子

win10系统怎么隐藏托盘的应用图标

基于ranger的kafka权限控制

NoteExpress插件在word中不显示怎么解决？

twixtor变速插件插件怎么使用？

qq应用管理器在哪里打开

win7系统应用技巧0x0000001A修复方法

应用图标消失恢复方法

使用HTML/CSS/JS做一个恋爱计时小挂件

常用jquery右健禁止命令

免插件、DZ内置JS轻松实现外链访问二次确认对话提示框

上山打老虎 LV4