Javascript Wix中的条件下拉菜单

第一篇文章在这里，我不是特别技术，所以请与我赤裸裸！我试图在Wix网站生成器中创建多个条件下拉列表，以便每个下拉列表的内容取决于上一个下拉列表的选择。我的数据库名为“产品”，列为“制造商”、“型号”和“零件”。下拉菜单称为#下拉1、#下拉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

从“wix数据”导入wixData

$w.onReady（函数（）{ $w（“#数据集_id”）.onReady（（）=>{

---

})

我终于可以工作了。问题是我的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}; 
        });
    }
}

---

非常感谢这个Sneha，你是建议我用上面的代码替换我的所有代码吗？还是需要插入到某个地方？-对不起，我完全是个新手！只要替换所有代码并设置所有id和executeThanks谢谢你的帮助Sneha，我已经这样做了，但现在我得到了“TypeError:undefined不是函数”错误。我还有3个下拉列表，分别是“制造商”、“型号”和“零件”，数据库名称是“产品”。您能帮忙吗？请在这里键入错误。请在代码顶部添加这一行：从“wix数据”导入wixData；

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