Dropdown selection changing page

Hi all,

I am trying to develop a dropdown list which will direct the user to certain dynamic pages dependent on the choice they make from the dropdown. I am using 2 dropdowns with one of them having conditional filtering in place and the list that appears in dropdown2 being dependent on the choice made in dropdown1 - it is from dropdown 2 that I wish to have the link to other pages created.

I have the conditional filtering aspect working fine but I am struggling to make the selections in dropdown2 redirect me to the relevant url. Below is the full code that I have tried:

import wixLocation from 'wix-location';
import wixData from 'wix-data';

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

function uniqueDropDown1 (){
    wixData.query("NewsMenuDropdown")
        .limit(1000)
        .find()
        .then(results =>{
 const uniqueTitles = getUniqueTitles(results.items);
            $w('#year').options = buildOptions(uniqueTitles);
        });
 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.year);
 return [...new Set(titlesOnly)];        
    }   
 function buildOptions(uniqueList){
 return uniqueList.map(curr => {
 return {label:curr, value:curr};
        });
    }
}

export function year_change_1(event, $w){
uniqueDropDown2();
$w('#dropdown2').enable();  
}

function uniqueDropDown2(){
    wixData.query('NewsMenuDropdown')
    .contains("year", $w('#year').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.monthYear);
 return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
 return uniqueList.map(curr =>{
 return {label:curr, value:curr};
    });
}

}

function pageChange (){
        $w('#dropdown2').onChange((event) => {
 let title = $w('#dropdown2').value;
        $w('#dataset1').onReady(() => {
            console.log("The dataset is ready to be filtered.");

    $w('#dataset1').setFilter(wixData.filter()
    .eq("monthYear", title)
    )
    .then(() => {
        console.log("Dataset1 dataset is now filtered with the matching title from the dropdown");
 let getItem = $w('#dataset1').getCurrentItem();
 let url = getItem.url;
        wixLocation.to(url);
    })
    .catch((err) => {
        console.log(err);
    });
        });
    });
}
 

Can anyone point me in the right direction as to what I am doing wrong with this please?

Thanks

This little examples may help you…

https://russian-dima.wixsite.com/meinewebsite/website-navigation

Thanks for the link russian-dima, some great examples on your website and I have added it to my favourites for future reference.

However, my code did work but I realised that this line:

.eq("monthYear", title)

has changed to:

.eq("title", title)

meaning it was searching the wrong field. No clue how it happened but I have returned it to the correct value and the dropdown is now working correctly.

Thanks for taking the time to respond and support - I am sure your website will come in useful as I continue to develop my website :slight_smile:

This one can now be closed thanks!