AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

javascript – 使用AJAX的动态级联下拉列表

分类：Ajax作者：编程之家原文地址

目的：

基于找到的示例here.使用ajax调用使用在getData()函数中解析的数据填充依赖的下拉列表.目前我的例子是使用在ajax-mocks.js文件中找到的静态数据,但是我无法理解如何正确地将数据解析到下拉列表中,以及填充其他下拉列表,如前所述.示例mockjax数据调用.

资源：

jQuery Cascading Dropdown

KnockoutJS – Loading/Saving Json Data

jQuery Mockjax

Select2

的functions.PHP

将HTML呈现给woocommerce前端产品页面

function add_custom_toga_fields() {
    if( has_term('toga', 'product_cat' ) ) {
        ?>
        <p class="label-description"><span>1. Details</span></p>
        <table id="graduation" class="custom-fields .bs-docs-example" cellspacing="0">
            <tbody>
                <tr>
                    <td class="label"><label for="institution">Institution<span class="required">*</span></label></td>
                    <td class="value">
                        <select name="institution" id="institution" class="step1 select2">
                            <option value="">Select institution</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="label"><label for="level">Level of Award<span class="required">*</span></label></td>
                    <td class="value">
                        <select name="level" id="level" class="step2 select2">
                            <option value="">Select level</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="label"><label for="faculty">Faculty<span class="required">*</span></label></td>
                    <td class="value">
                        <select name="faculty" id="faculty" class="step3 select2">
                            <option value="">Select Faculty</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="label"><label for="ceremony-date">Ceremony Date<span class="required">*</span></label></td>
                    <td class="value">
                        <input name="ceremony" type="text" id="ceremony">
                    </td>
                </tr>
                <tr>
                    <td>
                        <h4>Matches <img src="<?PHP echo get_stylesheet_directory_uri(); ?>/assets/icons/ajax-loader.gif" data-bind="visible: loading" /></h4>
                        <ul class="colour-results-list" data-bind="foreach: colours, visible: colours().length > 0">
                            <li style="background: red;">
                                <span class="colour-hat" data-bind="text: colour" style="background: yellow;"></span>
                            </li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
        <?PHP
    }
}
add_action( 'woocommerce_before_variations_form', 'add_custom_toga_fields' );

类系统public.PHP

从数据库获取数据并将其处理为正确的格式

public function get_data() {
    global $wpdb;

    $result = array();

    $records = $wpdb->get_results("CALL get_json_data");
    foreach($records as $record) {
        $obj = new stdClass();
        $obj->institution = $record->universityid;
        $obj->level = $record->levelid;
        $obj->faculty = [];

        $faculties = $wpdb->get_results("CALL get_courses_and_colour_by_university_and_level($obj->institution, $obj->level)");
        foreach($faculties as $faculty) {
            $facObj->name = $faculty->name;
            array_push($obj->faculty, $facObj->name);
        }
        array_push($result, $obj);
    }
    echo json_encode($result);

    wp_die();
}

定制dropdown.js

构建依赖级联下拉列表

jQuery(document).ready(function() {
    // Apply Select 2
    jQuery(".select2").select2();

    function getInstitutions() {
        var results = [
            { label: 'Test 1', value: 1 }, 
            { label: 'Test 2', value: 2 }, 
            { label: 'Test 3', value: 3 },
        ]
        return results;
    }

    function viewmodel() {
        this.colours = ko.observableArray([]);
        this.loading = ko.observable(false);
    }

    var graduation = new viewmodel();

    ko.applyBindings(graduation, document.getElementById('graduation'));

    jQuery('#graduation').cascadingDropdown({
        selectBoxes: [
            {
                selector: '.step1',
                source: getInstitutions()
            },
            {
                selector: '.step2',
                requires: ['.step1'],
                source: function(request, response) {
                    jQuery.getJSON('/api/levels', request, function(data) {
                        var selectOnlyOption = data.length <= 1;
                        response(jQuery.map(data, function(item, index) {
                            return {
                                label: item,
                                value: item,
                                selected: selectOnlyOption
                            };
                        }));
                    });
                }
            },
            {
                selector: '.step3',
                requires: ['.step1', '.step2'],
                requireAll: true,
                source: function(request, response) {
                    jQuery.getJSON('/api/faculties', request, function(data) {
                        response(jQuery.map(data, function(item, index) {
                            return {
                                label: item,
                                value: item,
                                selected: index == 0
                            };
                        }));
                    });
                },
                onChange: function(event, value, requiredValues, requirementsMet) {
                    if(!requirementsMet) return;

                    graduation.loading(true);

                    var ajaxData = requiredValues;
                    ajaxData[this.el.attr('name')] = value;
                    jQuery.getJSON('/api/colours', ajaxData, function(data) {
                        graduation.colours(data);
                        graduation.loading(false);
                    });
                }
            }
        ]
    });
});

Ajax的mock.js

一些mockjax数据来模拟ajax调用

// Some mockjax code to simulate Ajax calls
var colourList = [
    {
        faculty: [8, 16],
        institution: 2,
        level: "Bachelors",
        colour: 'Red'
    },
    {
        faculty: [32, 64],
        institution: 3,
        level: "Doctorate",
        colour: 'Green'
    },
    {
        institution: 2,
        level: "Bachelors",
        faculty: [8],
        colour: 'Blue'
    },
    {
        faculty: [16],
        institution: 3,
        level: "Masters",
        colour: 'Purple'
    },
    {
        faculty: [16],
        institution: 3,
        level: "Masters",
        colour: 'Pink'
    },
    {
        faculty: [16, 32],
        institution: 1,
        level: "Masters",
        colour: 'brown'
    },
    {
        level: 2,
        faculty: ["Msc Business @R_79_4045@ion System Management"],
        institution: 3,
        colour: 'Gray'
    }
];

getData();
function getData() {
    var data = { 'action': 'get_data' };
    var deferred = new jQuery.Deferred();

    return jQuery.post(ajaxurl, data, function(response) {
        var obj = JSON.parse(response);
        results = obj;
    }).done(function() {
        return deferred.resolve(results);
    }).fail(function() {
    });
}

function arrayIntersect(a, b) {
    return jQuery.grep(a, function(i) {
        return jQuery.inArray(i, b) > -1;
    });
}

function arrayToInt(array) {
    var output = [];

    for(var i=0;i<array.length;i++) {
        if(array[i] && !isNaN(+array[i])) output.push(+array[i]);
    }

    return output;
}

function arrayToFloat(array) {
    var output = [];

    for(var i=0;i<array.length;i++) {
        if(array[i] && !isNaN(parseFloat(array[i]))) output.push(parseFloat(array[i]));
    }

    return output;
}

function getColours(institution, level, faculty) {
    var _institution = arrayToFloat([].concat(institution)),
        _level = arrayToInt([].concat(level)),
        _faculty = arrayToInt([].concat(faculty));

    return jQuery.grep(colourList, function(item, index) {
        var i = true, l = true, f = true;

        if(_institution.length) {
            i = jQuery.inArray(item.institution, _institution) > -1;
        }

        if(_level.length) {
            l = jQuery.inArray(item.level, _level) > -1;
        }

        if(_faculty.length) {
            f = arrayIntersect(item.faculty, _faculty).length > 0;
        }

        return !!(i && l && f);
    });
}

function getLevels(level, faculty) {
    var colours = getColours(null, level, faculty);

    var institutions = jQuery.map(colours, function(colour) { return colour.institution; });
    institutions.sort(asc);
    return arrayUnique(institutions);
}

function getUniversities(institution, faculty) {
    var colours = getColours(institution, null, faculty);

    var levels = jQuery.map(colours, function(colour) { return colour.level; });

    levels.sort(asc);
    return arrayUnique(levels);
}

function getFaculties(institution, level) {
    var colours = getColours(institution, level, null);

    var faculties = [];
    jQuery.each(colours, function(index, item) {
        faculties = arrayUnique(faculties.concat(item.faculty));
    });
    faculties.sort(asc);
    return faculties;
}

function arrayUnique(array) {
    var a = array.concat();
    for(var i=0; i<a.length; ++i) {
        for(var j=i+1; j<a.length; ++j) {
            if(a[i] === a[j])
                a.splice(j--, 1);
        }
    }

    return a;
}

function asc(a, b) {
    return a - b;
}

jQuery.mockjax({
    url: ajaxurl,
    contentType: 'application/json; charset=utf-8',
    responseTime: 1000,
    response: function(settings) {
        this.responseText = JSON.stringify(getLevels(settings.data.level, settings.data.faculty));
    }
});

jQuery.mockjax({
    url: '/api/levels',
    contentType: 'application/json; charset=utf-8',
    responseTime: 1000,
    response: function(settings) {
        this.responseText = JSON.stringify(getUniversities(settings.data.institution, settings.data.faculty));
    }
});

jQuery.mockjax({
    url: '/api/faculties',
    contentType: 'application/json; charset=utf-8',
    responseTime: 1000,
    response: function(settings) {
        this.responseText = JSON.stringify(getFaculties(settings.data.institution, settings.data.level));
    }
});

jQuery.mockjax({
    url: '/api/colours',
    contentType: 'application/json; charset=utf-8',
    responseTime: 1000,
    response: function(settings){
        this.responseText = JSON.stringify(getColours(settings.data.institution, settings.data.level, settings.data.faculty));
    }
});

管理员-Ajax.PHP

收到admin-ajax.PHP的回复

enter image description here

额外说明

我一直试图弄清楚如何用来自服务器的ajax调用替换Mockjax调用,但我还没有完全理解所有使用的技术.

真诚地感谢你,无论是谁花时间帮我指导我正确的方向.非常感谢您的帮助.

解决方法:

您的问题包含PHP,jQuery,knockout和许多代码行.我冒昧地提出了一个核心问题并写了问题的答案.

如何使用knockout基于异步数据创建嵌套的下拉列表

抽象的要求

(我认为)您的系统的工作方式是：

>加载设置A并从服务器设置D.
>需要从集合A中进行选择以从服务器检索集合B,
>需要从集合B中选择从服务器检索集合C,
>当在集合A,B和C中选择时,过滤D列表

淘汰赛功能

在淘汰赛中,您可以使用以下三个功能创建此依赖关系链：

> observableArray存储每个集合的服务器响应
>订阅会在选择更改后触发新请求
> pureComputed根据多个数据源自动过滤对象列表.选

流程顺序

在下面的示例中,我将展示如何以典型的淘汰模式实现此功能：

>加载机构和颜色异步.
>当机构加载时,淘汰赛将其呈现在< select>
>所选值绑定到selection.institution
>当此值更改时,加载faculties async
>执行相同的加载级别
>选择级别后,筛选与所有三种颜色匹配的颜色

淘汰赛依赖管理的优点在于您可以随时更新任何这些列表,并且UI将正确呈现.例如.您可以在已经进行三次选择后更新颜色源,并且列表将刷新.

这个例子

请注意,我使用了代码段中的一些随机数据,因此对于许多组合,没有可用的颜色.此外,该示例包含您可能需要为旧版浏览器进行转换的es6功能.

const App = function() {
  
  // The data sources
  this.institutions = ko.observableArray([]);
  this.faculties = ko.observableArray([]);
  this.levels = ko.observableArray([]);
  const colours = ko.observableArray([]);

  // The selections made in the UI
  this.selected = {
    institution: ko.observable(null),
    faculty: ko.observable(null),
    level: ko.observable(null)
  };
  
  // The filter logic
  this.availableColours = ko.pureComputed(() => {
    if (colours().length === 0 ||
        this.selected.institution() === null ||
        this.selected.faculty() === null ||
        this.selected.level() === null) {
      return [];
    }
    
    const inst = this.selected.institution();
    const fac = this.selected.faculty();
    const lvl = this.selected.level();
    
    return colours()
      .filter(c =>
        c.institution === inst &&
        c.faculty.includes(fac) &&
        c.level === lvl
      );
  }).extend({"deferred": true});
  
  // Loading the data:
  // 1. always load institutions & colours
  mockAsync(getInstitutions)
    .then(this.institutions);
    
  mockAsync(getColours)
    .then(colours);
    
  // 2. load faculties after instution
  this.selected.institution.subscribe(
    selection => {
      this.faculties([]);
      /* do something with inst. in get URL */
      mockAsync(getFaculties)
        .then(this.faculties)
    }
  );
  
  // 3. load levels after faculty
  this.selected.faculty.subscribe(
    selection => {
      this.levels([]);
      /* do something with inst. in get URL */
      mockAsync(getLevels)
        .then(this.levels)
    }
  );
}

ko.applyBindings(new App());


function mockAsync(fn) {
  let _cb = () => {};
  setTimeout(() => _cb(fn()), 200 + Math.random() * 300);
  return {
    then: cb => _cb = cb
  }
};

function getLevels() { return ["Doctorate", "Bachelors", "Masters"]; };
function getInstitutions() { return [1, 2, 3]; };
function getFaculties(){ return  [8, 16, 32, 64]; };
function getColours() { return  [{faculty:[8,16],institution:2,level:"Bachelors",colour:"Red"},{faculty:[32,64],institution:3,level:"Doctorate",colour:"Green"},{institution:2,level:"Bachelors",faculty:[8],colour:"Blue"},{faculty:[16],institution:3,level:"Masters",colour:"Purple"},{faculty:[16],institution:3,level:"Masters",colour:"Pink"},{faculty:[16,32],institution:1,level:"Masters",colour:"brown"},{level:2,faculty:["Msc Business @R_79_4045@ion System Management"],institution:3,colour:"Gray"}]; };
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<select data-bind="options: institutions, 
                   optionsCaption: 'Select an institution',
                   value: selected.institution"></select>
                   
<select data-bind="options: faculties, 
                   optionsCaption: 'Select a faculty',
                   value: selected.faculty,
                   disable: !selected.institution()"></select>
                   
<select data-bind="options: levels, 
                   optionsCaption: 'Select a level',
                   value: selected.level,
                   disable: !selected.faculty()"></select>

<h3>Available colours:</h3>
<ul data-bind="foreach: availableColours">
  <li data-bind="text: colour"></li>
</ul>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但是在某些特殊情况下，我们可能还需要使用IE6来访问网页。而在IE6中，我们通常会使用JavaScript来提交表单，来看一下具体操作。
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个函数十分方便，在编写代码时使用频率也非常高。无论你是要统计数组的长度、统计字符串中字符出现的次数还是统计对象中属性的个数，count()都可以帮助你轻松
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。通常来说，我们使用 AJAX 请求是为了获取后台数据，并将其展示在前端页面上。然而，有时候我们只需要
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页用户体验的技术，通过与服务器进行异步通信，实现在网页上局部刷新数据而不必整个页面刷新的功能。在实际开发中，我们经常需要从服务器端下载文件，而传统
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。在某些场景下，我们需要通过AJAX下载Excel文件流，以便于在前端使用或保存到本地。本文将详
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求并获得响应数据。而在Ajax的基础上，.get和.post是两种常用的请求方法，它们分别用于发送GET和POST请
ajax 上传 excel
AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据传输的技术。通过AJAX，网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验和页面性能。在实际应用中，AJAX广泛用于表单提交、
ajax 下拉 360取不到值
在使用Ajax下拉加载数据的过程中，有时候会出现无法取到360度的问题。这个问题可能是由于代码逻辑的问题导致的，也有可能是网络延迟引起的。为了解决这个问题，我们需要对代码进行仔细排查，并且在合适的地方添加适当
ajax 与 .post 区别
本文将介绍Ajax和.post之间的区别。Ajax是一种用于在网页上进行异步通信的技术，能够在不刷新整个页面的情况下更新部分页面内容。.post是jQuery中的一个方法，用于向服务器发送POST请求。虽然它们都可以用于发送异步
ajax 上传文件 目录权限
AJAX（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据请求和交互的技术。它的出现使得页面在后台与服务器进行数据交互的同时，不需要重新加载整个页面。在网页开发中，常常需要实现文件上传功能，
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native