`

jquery Ajax 多级联动插件

阅读更多
#### js 

$('select.ajax-linkage').on('change', function () {
        var $this = $(this),
            $next_node = $($this.data('nextnode')),
            $selectedOpt = $this.find('option:selected'),
            url = $this.data('url'),
            key = $this.data('key') || 'id',
            valueKey = $this.data('valuekey') || 'name';
        if ($selectedOpt.length < 1) {
            $selectedOpt = $('<option value="">请选择</option>')
        }
        var ajax_data = $selectedOpt.data();
        ajax_data['ajax_value'] = $this.val();
        $.ajax({
            url: url,
            type: 'get',
            data: ajax_data,
            dataType: 'json',
            success: function (data) {
                console.log('select.ajax-linkage');
                var options_str = '<option value="">请选择</option>';
                if (data.data) {
                    var displayKeyStr = $this.data('displaykeys') || '',
                        displayKeys = displayKeyStr.split(',');
                    $.each(data.data, function (i, obj) {
                        var value = obj[key] || '';
                        options_str += '<option value="' + value + '" ';
                        var attrs = displayKeys.map(function (k) {
                            return "data-" + k + '="' + obj[k] + '"';
                        });
                        options_str += attrs.join(' ');
                        options_str += '>' + obj[valueKey] + '</option>';
                    });
                    $next_node.html(options_str);
                    $next_node.trigger("change");
                }
            }
        });
    });

 

    <select class="form-control input-inline input-small ajax-linkage" data-url=""
            data-nextnode="#base_l2" data-key="id" data-valuekey="name" data-displaykeys='no,size' id="base_l1" name="base_l1">
      <option value="">请选择</option>... 
    </select>
    <select class="form-control input-inline input-small ajax-linkage" data-url=""
            data-nextnode="#base_l3" data-key="id" data-valuekey="name" data-displaykeys='no' id="base_l2" name="base_l2">
      <option value="">请选择</option>
    </select>
    <select class="form-control input-inline input-small" id="base_l3" name="base_l3">
      <option value="">请选择</option>
    </select>

 

 

 

分享到:
评论

相关推荐

    jQuery ajax 多级联动 下拉框 Demo

    ajax 实现 (全国,省,是,区....) N级联 Demo js: &lt;script type="text/javascript"&gt; $(function () { $.fn.CascadeSelect({ url: '/CascadeSelect/CascadeSelect.ashx', //返回Json数据的一般处理文件 idKey: ...

    省市区 ajax多级联动 select

    项目开发中写的 性能还没考虑到 不过很实用 jsp页面直接引用*.js文件 稍加修改 即可使用。可以实现无限级联动。

    jQuery cxSelect 多级联动下拉菜单

    cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市、商品分类等联动菜单。 列表数据通过 AJAX 获取(需要在服务器环境运行),也可以使用变量自定义,数据内容使用 JSON 格式。

    jQuery chained多级联动插件

    摘要:脚本资源,Ajax/JavaScript,多级联动菜单,下拉框 jquery_chained基于jQuery的一款很不错的jQuery 多级联动插件多级联动插件,本例运行于PHP环境,也可以在ASP、JSP、中使用。jQuery 发展到现在,拥有相当多的...

    ld jquery多级联动插件,Json+XML

    摘要:脚本资源,jQuery,多级联动菜单,联动插件 ld 基于jquery多级联动插件 V1.2(明河作品),jquery多级联动插件明河曾经写过二个版本,期间得到各路朋友的不少反馈(特别是网名为Fox的朋友,提出的建议非常的详细...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧

    用Ajax实现多级联动下拉列表For ASP.NET 采用WebService实现

    这是将《用Ajax实现多级联动下拉列表(无限级别,JSON传输数据,含全国地区数据库))》(原来是asp的)改写成ASP.NET,服务器端采用WebService。仍然使用JSON传数据。原文地址:...

    ajax无限极联动

    通过ajax实现无限极联动,解决传统意义上的多级菜单功能,实现异步刷新

    jQuery插件cxSelect多级联动下拉菜单实例解析

    cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市、商品分类等联动菜单。 列表数据通过 AJAX 获取(需要在服务器环境运行),也可以使用变量自定义,数据内容使用 JSON 格式。 提供国内省市县数据(数据来源...

    cxSelect:jQuery cxSelect多级联动拖放菜单

    jQuery cxSelect cxSelect是基于jQuery的多级联动菜单插件,适用于省市,商品分类等联动菜单。列表数据通过AJAX获取,也可以自定义,数据内容使用JSON格式。同时兼容Zepto,方便在移动端使用。版本: jQuery v1.7 + ...

    Web前端Ajax&JQuery视频教程课件

    XMLHttpRequest实现Ajax,回调函数,Ajax数据交换格式(HTML、XML、JSON),Ajax发送GET和POST请求,异步编程模型和同步编程模型,解决Ajax的GET请求缓存问题,使用Ajax验证用户名是否可用、省和城市多级联动等案例。...

    jquery 实现二级/三级/多级联动菜单的思路及代码

    jQuery的AJAX功能和asp.net来实现省市区的三级联动效果,其他二级、三级或多级联动也可以按照此方法完成,由此需求的朋友可以参考下哈,希望可以帮助到你

    用Jquery实现多级下拉框无刷新的联动

    后来采取JQuery中AJAX功能,通过异步调用C#写的web服务实现。 load()方法可以说是JQuery中最简单的AJAX方法,它用于获取目标服务器的响应并将结果显示到页面上。load方法就是Jquery对AJAX的包装。还可以使用$.post()...

    LinkageSel Javascript 无限多级联动下拉菜单

    多级联动,支持Ajax动态获取数据并缓存数据,动态生成下级select菜单,设置动态生成"option"第一个条目作为提示项,自动选择唯一选项的菜单,设置回调函数在onChange事件触发时获取下拉菜单相关信息。 详细功能及...

    Ajax 四级导航菜单ASP+Access动态版

    Asp+Ajax无限级联动下拉框菜单Access版 ASP仿Google输入框提示_自动完成功能 AJAX+ASP多级无限制级联菜单(地市版) ASP下结合AJAX实现输入框提示(自动完成) ASP 树形菜单TreeView 多样式版 jQuery实例_飞飞ajax带...

    支持AJAX的TreeView树例子,使用省市县三级xml作演示

    看到网上很多想用ajax的树的例子,很奇怪,明明...注:顺便下载了一个省市县的3级xml文件,作为ajax树联动展示的例子 这个例子还实现了选中父结点时,选中全部子结点; 取消一个子结点,同时取消全部级别的父结点。

    jquery+ajax写的无限级选择框select

    jquery+ajax写的无限级选择框,可以根据ajax信息,一直选择选择……

Global site tag (gtag.js) - Google Analytics