jquery-cascading-dropdown | lighweight jQuery plugin for cascading dropdown | Plugin library

Your question contains a mix of PHP, jQuery, knockout, and many lines of code. I took the liberty to extract one core problem and write up an answer to that part of the question.

The way (I think) your system works, is that you:

• load set A and set D from the server
• require a selection from set A to retrieve set B from the server,
• require a selection from set B to retrieve set C from the server,
• when selections in set A, B and C, filter the list of D

In knockout, you can create this dependency chain using three features:

• observableArray to store the server responses for each set
• subscribe to trigger a new request once a selection changes
• pureComputed to automatically filter a list of objects based on several data-sources & selections

In the example below, I show how to implement this in a typical knockout pattern:

1. Load institutions and colours async.
2. When institutions load, knockout renders them in a The selected value is bound to selection.institution When this value changes, load faculties async Do the same to load levels When a level is selected, filter colours that match all three The beauty of knockout's dependency management is that you can update any of these lists at any time, and the UI will render correctly. E.g. you can update your colours source after having already made three selections, and the list will refresh. The example Note that I used some random data from your snippet, so for many combinations there are no colours available. Also, the example contains es6 features that you might need to transpile for older browsers. 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 Information System Management"],institution:3,colour:"Gray"}]; }; Available colours: