jQuery插件---exselect实现联动

时间：2022-09-21 13:42:11
<!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插件---exselect实现联动的更多相关文章

  1. 【jQuery系列之插件】jQuery插件---exselect实现联动

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

  2. 开发一个jQuery插件——多级联动菜单

    引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页 ...

  3. jQuery插件——多级联动菜单

    jQuery插件——多级联动菜单 引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后 ...

  4. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  5. 自己编写的仿京东移动端的省市联动选择JQuery插件

    概述 什么是插件,插件就是即插即用叫插件,很少的配置,很少的代码就可以用都项目里,之所以做这个插件,是因为做了一个省市区的联动,其他项目如果要用怎么办,难道在ctrl+c,ctrl+v?那样做太low ...

  6. 项目一&colon;第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理（在线下单）

    1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...

  7. ajax——三级联动下拉列表框的优化（简化页面，用jquery插件代替原来页面代码，返回处理数据类型为&quot&semi;TEXT&quot&semi;）

    数据库: 主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  8. javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件（三）

    在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...

  9. Json 基于jQuery&plus;JSON的省市联动效果

    helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动     省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...

随机推荐

  1. Allegro padstack

    在ALLEGRO中,建立PCB封装是一件挺复杂的事,而要建立FOOTPRINT,首先要有一个PAD,所以就要新建PADSTACK. 焊盘可以分两种,表贴焊盘和通孔焊盘,表贴焊盘结构相对简单,下面首先分 ...

  2. CH340在STM32实现一键下载电路

    在做基于STM32的多功能MP3播放器的课题时,在程序下载这部分时借鉴了正点原子开发板上的一键下载电路,采用CH340G这款芯片设计. 在画PCB初期原理图部分,对采用CH340G设计的一键下载电路不 ...

  3. English Learning

    EnglishPod 百度云盘:http://pan.baidu.com/s/1eQUJquA

  4. Codeforces Round &num;272 &lpar;Div&period; 1&rpar;D（字符串DP）

    D. Dreamoon and Binary time limit per test 2 seconds memory limit per test 512 megabytes input stand ...

  5. web框架之Flask

    Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对请求进行预处理,然后 ...

  6. Java实践：一个简易的http server和client的java源码学习和总结。

    一.基本思路: 1.服务器端通过socket(), 监听在TCP 8080端口,等待客户端来连接. 2.服务器端解析客户端的HTTP请求中的URI值,把本地的目录下指定文件通过java的读取文件的方式 ...

  7. python 代理的使用

    这里分享一个测试ip的网址     http://ip.filefab.com/index.php scrapy 随机请求头和代理ip的使用原理 import random # 添加一个中间键 cla ...

  8. Day037--Python--线程的其他方法&comma;GIL&comma; 线程事件&comma;队列&comma;线程池&comma;协程

    1. 线程的一些其他方法 threading.current_thread()  # 线程对象 threading.current_thread().getName()  # 线程名称 threadi ...

  9. 646&period; Maximum Length of Pair Chain 最长的链条长度

    ［抄题］: You are given n pairs of numbers. In every pair, the first number is always smaller than the s ...

  10. 使用Log4net创建日志及简单扩展

    如何使用Log4net创建日志及简单扩展 1.概述 log4net是.Net下一个非常优秀的开源日志记录组件.log4net记录日志的功能非常强大.它可以将日志分不同的等级,以不同的格式,输出到不同的 ...

相关文章