Wix 中的条件下拉菜单答案

【问题标题】：Conditional Dropdown Menus in WixWix 中的条件下拉菜单
【发布时间】：2021-04-27 09:42:02
【问题描述】：

第一次在这里发帖，我不是特别技术，所以请与我裸露！我正在尝试在 Wix 网站构建器中创建多个条件下拉列表，以便每个下拉列表的内容取决于前一个下拉列表的选择。我的数据库称为“产品”，列是“制造商”、“型号”和“零件”。下拉菜单称为#dropdown 1、#dropdown2 和#dropdown3。

第一个下拉目从数据库中正确填充，但是当某些东西选择时，它不会填充第二个下拉列表，这样我就不确定代码是否触发。我的代码如下，任何帮助将不胜感激，因为我已经为此苦苦挣扎了好几天！

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}; 
        });
    }
}

非常感谢，奥斯卡

【问题讨论】：

标签： javascript java drop-down-menu velo

【解决方案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)

    }

});

});

【讨论】：

非常感谢这个 Sneha，您是否建议我用上面的代码替换我的所有代码？还是需要将其插入某处？ - 对不起，我是个新手！
只需替换所有代码并设置所有ID并执行
感谢您的帮助 Sneha，我已经做到了，但现在我收到“TypeError: undefined is not a function”错误。我还有 3 个下拉菜单，分别称为制造商、型号和零件，数据库名称是产品。你能帮忙吗？
在代码顶部添加这一行：import wixData from 'wix-data';
嗨，我现在修改了代码，所以下拉菜单正在触发，但它没有填充正确的值，但它正在启用下拉菜单。我已将新代码放在原始问题中。

【解决方案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}; 
        });
    }
}

【讨论】：