You're not eligible to view this page. Click here to access this course or Log In if you've purchased it already

dealing with dropdown

remove duplicates in dropdown

This code will eliminate the duplicates in dropdown.

Sometimes we need to populate our dropdown from the fields in our database, this scenario would be required if we have a large number of options and as well if these choices vary by time, so this example is needed if we do not want to manually add or remove the choices all the time.All we have to do is to insert this code and work on our database only.

For this example we populate our dropdown by country in ascending order  (from A to Z).

 

Add a dropdown from the menu and delete its choices and change its placeholder according to your needs.

arrow&v

Once you have added the dropdown, then change its ID to countryDropdown

Now inside the $w.onReady(function () paste the code below.

This is how your complete code should look like

import wixData from 'wix-data';


$w.onReady(function () {

    wixData.query("Properties").ascending("country")
    .limit(1000)
        .find()
        .then(results => {

            const uniqueItems = getUniqueItems(results.items);
            $w("#countryDropdown").options = buildOptions(uniqueItems);
        });

    function getUniqueItems(items) {
        const itemsOnly = items.map(item => item.country);
        return [...new Set(itemsOnly)];
    }

    function buildOptions(uniqueList) {
        return uniqueList.map(curr => {
            return { label: curr, value: curr };
        });
    }
    
  })

Your code should look like the picture below

remove duplicate in dropdown on wix.png

*** VERY IMPORTANT ***

In our example we used our IDs according to our:

- database name (Properties)

- fieldKey (country)

- dropdown ID (countryDropdown)

In order to make it work on your site you should change them according to your site IDs.

Follow these instructions in the picture 

wix remove duplicates from dropdown.jpg

remove duplicates in dropdown and add A "all" option

This code will eliminate the duplicates in dropdown and add an option to retrieve back all the items at once.

This example is very similar to the previous one but is more precise as we add the option "All" to retrieve back all the elements at once.

For this example we populate our dropdown by country in ascending order  (from A to Z).

 

Add a dropdown from the menu and delete its choices and change its placeholder according to your needs.

arrow&v

Once you have added the dropdown, then change its ID to countryDropdown

Now inside the $w.onReady(function () paste the code below.

This is how your complete code should look like

import wixData from 'wix-data';

 

$w.onReady(function () {

    wixData.query("Properties").ascending("country")

        .find()

        .then(results => {

 

            var uniqueList = createUniqueList(results.items);

            $w("#countryDropdown").options = buildOptions(uniqueList);

        });

 

    function createUniqueList(items) {

        var titlesOnly = items.map(item => item.country);

        titlesOnly.sort();

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

    }

 

    function buildOptions(uniqueList) {

        var uniqueListFinal = uniqueList.map(curr => {

            return { label: curr, value: curr };

        });

        uniqueListFinal.unshift({ "label": "All", "value": "" });

        return uniqueListFinal

    }

});

Your code should look like the picture below

wix remove duplicates in dropdown.png

*** VERY IMPORTANT ***

In our example we used our IDs according to our:

- database name (Properties)

- fieldKey (country)

- dropdown ID (countryDropdown)

In order to make it work on your site you should change them according to your site IDs.

Follow these instructions in the picture 

wix remove duplicates in dropdown.jpg

dependent dropdown

This code will show you how to deal with two dropdown, once the first changes, the second updates as well depending on the first one.

For this example we will be using two dropdown: Country and City.​

In this tutorial we populate our dropdown country and city in ascending order  (from A to Z).

 

Add two dropdown from the menu, delete their choices and change their placeholder according to your needs.

In this example we use Select Country and Select City as placeholders.

Notice that the second dropdown (Select a City) is disabled on load. We do this in order to enable it only when the first has changed. To disable the dropdown once the page loads, uncheck its ENABLED BY DEFAULT option from its properties panel.

See picture for reference

arrow&v
arrow&v

Once you have added the 2 dropdown countryDropdown and cityDropdown , then add a function and run it inside the country dropdown onChange event.

Your code should look like the following

import wixData from 'wix-data';

 

$w.onReady(function () {

    wixData.query("Properties").ascending("country")

        .find()

        .then(results => {

 

            var uniqueList = createUniqueList(results.items);

            $w("#countryDropdown").options = buildOptions(uniqueList);

        });

 

    function createUniqueList(items) {

        var titlesOnly = items.map(item => item.country);

        titlesOnly.sort();

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

    }

 

    function buildOptions(uniqueList) {

        var uniqueListFinal = uniqueList.map(curr => {

            return { label: curr, value: curr };

        });

        uniqueListFinal.unshift({ "label": "All", "value": "" });

        return uniqueListFinal

    }

});


 

function populateCityDropdown (parameter) {

    wixData.query("Properties").eq("country", $w("#countryDropdown").value)

        .find()

        .then(results => {

 

            var uniqueList = createUniqueList(results.items);

            $w("#cityDropdown").options = buildOptions(uniqueList);

        });

 

    function createUniqueList(items) {

        var titlesOnly = items.map(item => item.city);

        titlesOnly.sort();

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

    }

 

    function buildOptions(uniqueList) {

        var uniqueListFinal = uniqueList.map(curr => {

            return { label: curr, value: curr };

        });

        return uniqueListFinal

    }

}


 

export function countryDropdown_change(event) {

    populateCityDropdown();

    if ($w("#countryDropdown").value === "") {

        $w("#cityDropdown").disable();

        $w("#cityDropdown").selectedIndex = undefined;

    } else {

        $w("#cityDropdown").enable();

    }

 

}

Enabled by default wix edited.jpg

reset dropdown option

In this example we will show you how to reset a dropdown option.

This is needed when having multiple dropdown. when they change you might need the other to reset its value.

For this tutorial we will be using two dropdown, DropdownA and DropdownB.

Whenever one of the two dropdown changes value, the other gets erased.

Your dropdown should look like the ones below

arrow&v
arrow&v

As you can see from the example, the dropdown reset depending on each other.

Activate the onChange event for both dropdown.

Once done paste the following code into your code Tab:

$w.onReady(function () {

 

});



 

export function DropdownA_change(event) {

$w("#DropdownB").selectedIndex = undefined;

}

 

export function DropdownB_change(event) {

$w("#DropdownA").selectedIndex = undefined;

 

}

Your code should look like the picture below

wix dropdown option reset.png

add dropdown options using code

In this example we will show you how to add options to a dropdown using code.

First of all add a dropdown, change its ID to citiesDropdown and delete its default choices.

For this example we will add the following cities as options:

- Berlin

- Rome

- Paris

- New York

Your dropdown should look like the ones below

arrow&v

Once added, paste the following code:​

$w.onReady(function() {

 

    $w("#citiesDropdown").options = [

        { "label": "Berlin", "value": "Berlin" },

        { "label": "Rome", "value": "Rome" },

        { "label": "Paris", "value": "Paris" },

        { "label": "New York", "value": "New York" }

    ];

 

})

Your code should look like the picture below

wix dropdown options using code.png