HI
I have rather complex set up where by the 3 drop downs at the top filter each other ending with the muscle group (This works fine as dependent drop downs)
From there i have multiple drop down input fields named training 1 2 and 3 that i need to show applicable exercise values after that last muscle group filter box.
i can make it work but when i change the filters at the top it changes all my drop down input boxes,i dont want that i need the value to lock in once selected and not changed unless i click the drop down again.
All the data comes from the same database named Training but not sure how to get this working properly.
Any brave takers on this one?
import wixData from ‘wix-data’;
$w.onReady( function () {
pushPulluniquedropdown();
});
// Push pull unique drop down generator
function pushPulluniquedropdown (){
wixData.query(“Training”)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#pushPulldropdown”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.ppl);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function pushPulldropdown_change(event) {
bodyPartuniquedropdown();
$w(“#bodyPartdropdown”).enable();
}
// Body parts unique drop down generator
function bodyPartuniquedropdown (){
wixData.query(“Training”)
.contains(“ppl”, $w(“#pushPulldropdown”).value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#bodyPartdropdown”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.bodyPart);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function bodyPartdropdown_change(event) {
muscleGroupuniquedropdown();
$w(“#muscleGroupdropdown”).enable();
}
// Muscle group unique drop down generator
function muscleGroupuniquedropdown (){
wixData.query(“Training”)
.contains(“bodyPart”, $w(“#bodyPartdropdown”).value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#muscleGroupdropdown”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.muscleGroup);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
//Training dropdown generator
export function muscleGroupdropdown_change(event) {
$w(“#training1Dropdown”).options = filterTrainingdropdown()
}
export function filterTrainingdropdown () {
wixData.query(‘Training’)
.eq(“muscleGroup”,$w(“#muscleGroupdropdown”).value)
.ascending(“exercise”)
.limit(300)
.find()
.then(res => {
let options = [{
//“value”: ‘’,
//‘label’: ‘’
}];
options.push(…res.items.map(Training => {
return {
‘value’: Training.exercise,
‘label’: Training.exercise
};
}));
$w(‘#training1Dropdown’).options = options;
console.log(res)
})
}