Creating a conditional dropdown filters that connect to each others

Ask the community
, , ,
1

I am building a website to list the hotel’s function rooms, and one of the main features we need is a robust “filter” function. This will allow visitors to easily search for function rooms that meet their specific needs.

For example, if many properties are listed on the website, we need a powerful filter to help users narrow down their options. The filter should include the following criteria:

  • Country: The location of the hotel/property.
  • City: The specific area where the meeting room is located.
  • Number of participants: The capacity of the meeting rooms.

Here’s how the filter should work step-by-step for an optimal user experience:

  1. Country Selection:
  • The user selects a country, for example, “Vietnam.”
  • Once selected, the filter displays the available cities in that country.
  1. City Selection:
  • The user chooses a city from the list, such as:
    • Ho Chi Minh City
    • Hanoi
    • Nha Trang
    • Other available cities
  1. Capacity Selection:
  • After selecting the city, the user can then choose the meeting room capacity that fits their needs, such as:
    • 1,000 participants
    • 500 participants
    • 200 participants
    • Other capacities as available

With these filter options working seamlessly, visitors can find the perfect meeting room for their needs quickly and efficiently.

Here is the website that I am testing the filter: https://digitalsolutiongroup.wixsite.com/website-4/khach-san-resort

The code that I am using actually does 50% of the things I want. But it has a problem. When I choose Ho Chi Minh in the City Filter first, I want the Country filter to limit the option to Vietnam, the same goes to Total capacity Filter.

Here is the code that I am using:

import wixData from 'wix-data';

$w.onReady(function () {
    console.log("Page is ready");
    uniqueDropDown1();
    $w("#dropdown1").onChange(dropdown1_change);
    $w("#dropdown2").onChange(dropdown2_change);
});

function getUniqueTitles(items, field) {
    console.log(`Extracting unique titles from field: ${field}`);
    const titlesOnly = items.map(item => item[field]);
    console.log(`Titles extracted: ${titlesOnly}`);
    const uniqueTitles = [...new Set(titlesOnly)];
    console.log(`Unique titles: ${uniqueTitles}`);
    return uniqueTitles;
}

function buildOptions(uniqueList) {
    console.log(`Building options for unique list: ${uniqueList}`);
    return uniqueList.map(curr => {
        return { label: curr, value: curr };
    });
}

function uniqueDropDown1() {
    console.log("Fetching unique values for dropdown1");
    wixData.query("Listing")  // Replace "dataset1" with "Listing"
        .limit(1000)
        .find()
        .then(results => {
            console.log("Results from Listing for dropdown1", results.items);
            const uniqueTitles = getUniqueTitles(results.items, "qucGia");
            $w("#dropdown1").options = buildOptions(uniqueTitles);
            console.log("Dropdown1 options set");
        })
        .catch(err => {
            console.error("Error fetching data for dropdown1", err);
        });
}

function dropdown1_change(event) {
    console.log("Dropdown1 changed", event);
    uniqueDropDown2();
    $w("#dropdown2").enable();
}

function uniqueDropDown2() {
    console.log(`Fetching unique values for dropdown2 based on dropdown1 value: ${$w("#dropdown1").value}`);
    wixData.query("Listing")  // Replace "dataset1" with "Listing"
        .contains("qucGia", $w("#dropdown1").value)
        .limit(1000)
        .find()
        .then(results => {
            console.log("Results from Listing for dropdown2", results.items);
            const uniqueTitles = getUniqueTitles(results.items, "tnhThnhPh");
            $w("#dropdown2").options = buildOptions(uniqueTitles);
            console.log("Dropdown2 options set");
            $w("#dropdown2").enable();
        })
        .catch(err => {
            console.error("Error fetching data for dropdown2", err);
        });
}

function dropdown2_change(event) {
    console.log("Dropdown2 changed", event);
    uniqueDropDown3();
    $w("#dropdown3").enable();
}

function uniqueDropDown3() {
    console.log(`Fetching unique values for dropdown3 based on dropdown2 value: ${$w("#dropdown2").value}`);
    wixData.query("Listing")  // Replace "dataset1" with "Listing"
        .contains("tnhThnhPh", $w("#dropdown2").value)
        .limit(1000)
        .find()
        .then(results => {
            console.log("Results from Listing for dropdown3", results.items);
            const uniqueTitles = getUniqueTitles(results.items, "totalCapacity");
            $w("#dropdown3").options = buildOptions(uniqueTitles);
            console.log("Dropdown3 options set");
        })
        .catch(err => {
            console.error("Error fetching data for dropdown3", err);
        });
}

Please show me how to achieve the things I want

P/s: I kind of new to the coding, so please show me step by step how to do it

1 Like