The following tutorial includes a project that displays a drop-down list with locations:
https://code.daypilot.org/61166/php-shift-planning-javascript-html5-mysql-database
When a user selects an item, the Scheduler view gets updated. The logic related to the drop-down list looks like this:
var locations = {
list: [],
find: function (id) {
if (!locations.list) {
return null;
}
return locations.list.find(function (item) {
return item.id === id;
});
},
element: document.querySelector("#locations"),
activate: function (location) {
var item = location;
if (typeof location !== "object") {
item = locations.find(location);
}
dp.events.list = [];
dp.rows.load("backend_people.php", function (args) {
args.data.splice(0, 0, {id: "L" + item.id, name: item.name, type: "location"});
});
dp.events.load("backend_assignments.php?location=" + item.id);
},
load: function () {
DayPilot.Http.ajax({
url: "backend_locations.php",
success: function(ajax) {
locations.list = ajax.data;
locations.element.innerHTML = '';
locations.list.forEach(function (item) {
var option = document.createElement("option");
option.value = item.id;
option.innerText = item.name;
locations.element.appendChild(option);
});
locations.activate(locations.list[0]);
}
});
},
init: function() {
window.addEventListener("DOMContentLoaded", function() {
locations.element.addEventListener("change", function(ev) {
locations.activate(this.value);
});
locations.load();
});
}
};
locations.init();