<!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插件---exselect实现联动的更多相关文章

  1. jQuery系列 第一章 jQuery框架简单介绍

    第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...

  2. jQuery系列 第二章 jQuery框架使用准备

    第二章 jQuery框架使用准备 2.1 jQuery框架和JavaScript加载模式对比 jQuery框架的加载模式 <script> window.onload = function ...

  3. 【Jquery系列】之Jquery 选择器

    1   概述 本篇文章为穿插文章,ASP.NET MVC系列目前写了如下几篇: 详解google Chrome浏览器(理论篇) 详解Google Chrome浏览器(操作篇)(上) 详解Google ...

  4. jQuery系列 第八章 jQuery框架Ajax模块

    第八章 jQuery框架Ajax模块 8.1 jQuery框架中的Ajax简介 Ajax技术的核心是XMLHTTPRequest对象,该对象是Ajax实现的关键,发送异步请求.接收服务器端的响应以及执 ...

  5. jquery系列教程7-自定义jquery插件全解：对象函数、全局函数、选择器

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

  6. jQuery插件---exselect实现联动

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  7. flot - jQuery 图表插件(jquery.flot)使用

    Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 特别注意Flot使用的是UTC时间,最好修改flot.js去掉所有的UTC ...

  8. jQuery 版本选择与常见插件库总结

    在日常的开发中jQuery作为一个流行多年的轻量级 JavaScript 库,使用十分的普遍,主要源于它的便捷性和实用性非常高. 在此总结一些关于jQuery版本的区别和选择的建议,以及一些常见插件库 ...

  9. JQuery模板插件-jquery.tmpl

    转载:https://www.cnblogs.com/whitewolf/archive/2011/10/09/2204185.html 在下面介绍一款jQuery的模板插件 tmpl,是由微软想jQ ...

随机推荐

  1. Winform DatagridviewcomboboxColumn Disable Style

    DataGridViewComboBoxCell cell =(DataGridViewComboBoxCell)dataGridView1[e.ColumnIndex, e.RowIndex]; c ...

  2. 函数调用前有"::"符号，什么意思啊？

    struct ifreq ifrf; ::memset(&ifrf,0,sizeof(ifrf)); ::strncpy(ifrf.ifr_name, ifr[addrCount].ifr_n ...

  3. Java 并发编程学习笔记 理解CLH队列锁算法

    CLH算法实现 CLH队列中的结点QNode中含有一个locked字段,该字段若为true表示该线程需要获取锁,且不释放锁,为false表示线程释放了锁.结点之间是通过隐形的链表相连,之所以叫隐形的链 ...

  4. jquery-easyui 中表格的行编辑功能

    具体实现代码如下: <table id="tt"></table> $('#tt').datagrid({ title:'Editable DataGrid ...

  5. 验证url 地址是否是图片

    由于正则不是很熟悉 所以面对这样的目前只能采取两步走 一 判断url地址是否是正确的http 二判断后缀是否是图片 格式 /驗證URL function validUrl(strUrl){ strUr ...

  6. Hash表的表大小

    hash表的出现主要是为了对内存中数据的快速.随机的访问.它主要有三个关键点:Hash表的大小.Hash函数.冲突的解决. 这里首先谈谈第一点:Hash表的大小. Hash表的大小一般是定长的,如果太 ...

  7. getaddrinfo ENOTFOUND https://api.weixin.qq.com https://api.weixin.qq.com:443

    原因:这是由于你当前的主机不能够连接到你填写的url. 解决方法: 先ping api.weixin.qq.com ping不通的话,就是外网访问的问题. 开通外网访问就可以了.

  8. LINUX下CPU Load Average的一点研究

    背景: 公司的某个系统工作在基于Linux的Cent OS下,一个host下同时连接了许多client, 最近某台Host总是显示CPU Load Average过高,我们单纯的以为是CPU的占用过高 ...

  9. CentOS下添加sudo用户

    一 .sodo的使用 1.1 关于sudo Sudo是linux系统中,非root权限的用户提升自己权限来执行某些特性命令的方式,它使普通用户在不知道超级用户的密码的情况下,也可以暂时的获得root权 ...

  10. CSS使用学习总结

    尽量少使用类,因为可以层叠识别,如: .News h3而不必在h3上加类 <div class=”News”> <h3></h3> <h2></h ...