Conditional filtering - Dropdowns in wix website

93 Views Asked by At

second post on here and I'm not particularly technical so please bare with me! I am trying to create conditional dropdowns in the Wix website builder so that the contents of each dropdown is dependent on the selection from the previous one. My database is called 'Categorys' and the Columns are "category"& "subcategory". The dropdown menus are called #dropdown1 & #dropdown2.

The first dropdown correctly populates from the database and also second dropdown enabled however when trying to select second dropdown data doesn't populate the second dropdown so I'm not sure if the code is firing or not. My code is below, any help would be much appreciated as I've been struggling with this for days!!




import wixData from 'wix-data';

$w.onReady(function () {
    uniqueDropDown1();
});

function uniqueDropDown1() {
    wixData.query("Categorys")
        .limit(1000)
        .find()
        .then(results => {
            const uniqueTitles = getUniqueTitles(results.items);
            $w("#dropdown1").options = buildOptions(uniqueTitles);
        });

    function getUniqueTitles(items) {
        const titlesOnly = items.map(item => item.category);
        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("Categorys")
            .contains("category", $w("#dropdown2").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 };
            });
        }
    }
}

function uniqueDropDown2 (){

    wixData.query("Categorys")

        .limit(1000)

      .find()

      .then(results => {

           const uniqueTitles = getUniqueTitles(results.items);

           $w("#dropdown2").options = buildOptions(uniqueTitles);

      });

  function getUniqueTitles(items) {

    const titlesOnly = items.map(item => item.subCategory);

    return [...new Set(titlesOnly)];

}

function buildOptions(uniqueList) {

    return uniqueList.map(curr => {

        return { label: curr, value: curr };

    });

}

}


0

There are 0 best solutions below