`

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

    在网页开发中,"省市区 ajax多级联动 select" 是一种常见的交互设计,主要用于用户填写地址信息时,通过联动下拉框的方式展示省、市、区的层级结构。这种功能通常利用 AJAX(异步JavaScript和XML)技术实现,与...

    jquery实现多级联动菜单

    本教程将深入探讨如何使用jQuery来创建一个响应式的多级联动菜单。 首先,我们需要理解联动菜单的基本原理。联动菜单通常由多个级别组成,每个级别中的选项根据上一级的选择动态改变。例如,一级菜单可能包含“产品...

    ajax多级联动菜单

    【Ajax多级联动菜单】是一种常见的前端交互设计,它允许用户在选择某个菜单项时,自动更新下一级菜单的内容,以此类推,实现多级菜单之间的动态关联。这种技术广泛应用于网页表单填写、筛选器等场景,为用户提供更加...

    jQuery多级联动下拉框插件

    jQuery多级联动下拉框插件是一种常用的前端交互组件,主要应用于网页表单设计中,以实现级联选择的效果。这种插件可以帮助用户在多个下拉框之间建立关联,当用户在一级下拉框中选择一个选项时,二级下拉框会自动更新...

    jQuery移动端省市二级联动选择插件.zip

    "jQuery移动端省市二级联动选择插件"是专为解决这个问题而设计的一个工具,它利用JavaScript和jQuery库,提供了高效、易用的解决方案。这个插件允许用户在手机或平板设备上方便地选择省份和城市,极大地提升了用户...

    基于JQUERY的多级联动代码

    本篇文章将详细解析基于jQuery实现的多级联动代码,主要涉及的知识点包括jQuery插件开发、DOM操作、Ajax请求以及多级联动下拉列表的构建。 首先,`jquery.select.more.js`中的`doselectmore`函数是一个jQuery扩展...

    jQuery cxSelect 多级联动下拉菜单

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

    jQuery 多级联动菜单 div+css

    本文将深入探讨如何使用 jQuery 实现多级联动菜单,并以 "jQuery 多级联动菜单 div+css" 的实例进行解析。 首先,我们了解基础概念。`div` 是 HTML 中的一个布局容器,用于组织页面元素。`CSS`(层叠样式表)则负责...

    jQuery多级联动查城市

    在IT行业中,jQuery是一个广泛使用的...总的来说,"jQuery多级联动查城市"是一个涉及到jQuery选择器、事件处理、AJAX异步通信、数据操作和用户体验等多个方面知识的应用实例,对于提升前端开发技能具有很高的实践价值。

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

    本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的效果,这对于在数据录入时需要根据上一级选择动态更新下一级选项的情况非常有用,比如在本例中的“老师分类”和“老师细类”。...

    ajax 多级联动数据库版(带后台和省市县数据库)

    **Ajax 多级联动数据库版概述** Ajax,全称Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。在本项目中,"Ajax 多级联动数据库版(带后台和省市县数据库)"是...

    jQuery多级联动美化版Select下拉框插件.zip

    《jQuery多级联动美化版Select下拉框插件详解》 在Web开发中,我们经常需要处理复杂的表单,特别是涉及到多级联动选择时,如省份-城市-区县的选择,这种需求使得用户界面需要更加友好和高效。jQuery作为一款强大的...

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

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

    ajax多级联动案例代码

    总结来说,这个Ajax多级联动案例的核心在于:前端监听用户操作,通过Ajax与服务器进行通信,服务器处理请求并返回数据,前端接收并动态渲染结果。这样的设计极大地提升了用户体验,因为用户无需等待整个页面刷新,只...

    jQuery chained多级联动插件

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

    Jquery各种插件和JQuery Ajax三级联动地区下拉框 & 非Ajax实现三级联动

    这些插件可能包含对多级联动支持的内置解决方案,简化开发过程。 总结一下,这篇博客可能涵盖了以下知识点: 1. jQuery库的基本概念和使用。 2. jQuery插件的应用,特别是用于增强下拉框功能的插件。 3. Ajax的基本...

Global site tag (gtag.js) - Google Analytics