Hello, Everyone. I’m close to what i’m trying to achieve.
I have been searching the query for this issue, but haven’t found the best solution
Here’s my database (Codes on the bottom of the page)
The links are just an example, i’ll change them to file hosting url later on.
So, I want the user to be redirected to the last column based on the previous selection on the previous row.
For example, APP1>WINDOWS>GOOGLE>“xxx/google1”
but when i chose the mobile platform, the url remains the same as before. It should be “xxx/google1_2”
It seems that the link were populated by the last field which is either GOOGLE or BING, i want them to get filtered out based on the selection of the entire row.
If you still don’t understand, watch the video below
Here’s my code
import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;
$w.onReady( function () {
uniqueDropDown1();
});
function uniqueDropDown1() {
wixData.query(“test”)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#d1”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.product);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
export function d1_change(event, $w) {
uniqueDropDown2();
$w(“#d2”).enable();
$w(“#d2”).show();
}
function uniqueDropDown2() {
wixData.query(“test”)
.contains(“product”, $w(“#d1”).value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#d2”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.platform);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
export function d2_change(event, $w) {
$w(“#d3”).enable();
$w(“#d3”).show();
uniqueDropDown3();
}
function uniqueDropDown3() {
wixData.query(“test”)
.contains(“platform”, $w(“#d2”).value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#d3”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.link);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
export function d3_change(event, $w) {
$w(“#d4”).enable();
uniqueDropDown4();
$w(“#button1”).enable();
$w(“#button1”).show();
}
function uniqueDropDown4() {
wixData.query(“test”)
.contains(“link”, $w(“#d3”).value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#d4”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.redirect);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
export function button1_click(event) {
//Add your code for this event here:
let firstOption = $w(“#d4”).options[0];
let test = firstOption.label;
console.log(test);
wixLocation.to(test);
}
Thanks!
