Wix中的条件下拉菜单

Question

这里的第一篇文章，我不是特别专业，所以请和我一起分享！我正试图在Wix网站生成器中创建多个条件下拉列表，以便每个下拉列表的内容取决于前一个下拉列表的选择。我的数据库名为"产品"，列为"；制造商"型号"&quot；部分"；。下拉菜单被称为#dropdown 1、#dropdown 2&下降3.

第一个下拉列表正确地从数据库中填充，但是当选择某个内容时，它不会填充第二个下拉列表，所以我不确定代码是否正在激发。我的代码在下面，任何帮助都将不胜感激，因为我已经挣扎了好几天了！！

import wixData from 'wix-data';
$w.onReady(function () {
uniqueDropDown1();
});
function uniqueDropDown1 (){
wixData.query("Products")
.limit(1000) 
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items); 
$w("#dropdown1").options = buildOptions(uniqueTitles); 
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.Manufacturer);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) { 
return uniqueList.map(curr => {
return {label:curr, value:curr}; 
});
}
}
export function dropdown1_change(event) {
uniqueDropDown2(); 
$w("#dropdown2").enable();
function uniqueDropDown2 (){
wixData.query("Products")
.contains("Manufacturer", $w("#dropdown1").value)
.limit(1000) 
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items); 
$w("#dropdown2").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.Manufacturer);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) { 
return uniqueList.map(curr => {
return {label:curr, value:curr}; 
});
}
}
}
export function dropdown2_change(event) {
uniqueDropDown3(); 
$w("#dropdown3").enable();
function uniqueDropDown3 (){
wixData.query("Products")
.contains("Model", $w("#dropdown2").value)
.limit(1000) 
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items); 
$w("#dropdown3").options = buildOptions(uniqueTitles); 
});
}
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.Model);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) { 
return uniqueList.map(curr => {
return {label:curr, value:curr}; 
});
}
}

非常感谢，Oscar

Answer 1

从'wix-data'导入wixData；

$w.onReady(函数(({$w('#dataset_id'(.onReady(((=>｛

$w('#dropdown_1_id').onChange(() => {
search();
})
$w('#dropdown_2_id').onChange(() => {
search();
})
function search() {
let productFilter = wixData.filter();
let variable_1 = $w("#dropdown_1_id").value;
let variable_2 = $w("#dropdown_2_id").value;
if (variable_2) {
productFilter = productFilter.eq("database_name_variable2", variable_2);
}
if (variable_1 && variable_1 !== 'All') {
productFilter = productFilter.eq("database_name_variable1", variable_1);
}
if (variable_2 && variable_2 !== 'All') {
productFilter = productFilter.eq("database_name_variable2", variable_2);
}
$w('#dataset_id').setFilter(productFilter)
}
});

})；

Answer 2

我终于完成了这项工作。问题是我的OnChange事件没有定义到下拉列表中。以下代码：

import wixData from 'wix-data';
$w.onReady(function () {
uniqueDropDown1();
});
function uniqueDropDown1 (){
wixData.query("Products")
.limit(1000) 
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items); 
$w("#dropdown1").options = buildOptions(uniqueTitles); 
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.Manufacturer);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) { 
return uniqueList.map(curr => {
return {label:curr, value:curr}; 
});
}
}
export function dropdown1_change(event) {
uniqueDropDown2(); 
$w("#dropdown2").enable();
function uniqueDropDown2 (){
wixData.query("Products")
.contains("Manufacturer", $w("#dropdown1").value)
.limit(1000) 
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items); 
$w("#dropdown2").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.Model);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) { 
return uniqueList.map(curr => {
return {label:curr, value:curr}; 
});
}
}
}
export function dropdown2_change(event) {
uniqueDropDown3(); 
$w("#dropdown3").enable();
function uniqueDropDown3 (){
wixData.query("Products")
.contains("Model", $w("#dropdown2").value)
.limit(1000) 
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items); 
$w("#dropdown3").options = buildOptions(uniqueTitles); 
});
}
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.Part);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) { 
return uniqueList.map(curr => {
return {label:curr, value:curr}; 
});
}
}