Removing Drop Down Item After Selection

Ask the community
,
1

I am going to have multiple drop down elements on one of my pages. The selections are defined by a database.

I only want an item from the database to be selected once. So if Item 1 is selected in the first drop down list, I only want Items 2-5 to be available for the rest.

I’m having trouble figuring out how to do this.

2

Something like this then?
https://www.wix.com/corvid/example/cascading-form

https://codequeen.wixsite.com/dropdown
https://www.youtube.com/watch?v=EhXed0u6wh0 - video for above tutorial

3

You can try something like this (this code works even if the user starts from dropdown 2 and then move to dropdown 1 etc…):

 
let data = [{"label": "a", "value": "a"},{"label": "b", "value": "b"},{"label": "c", "value": "c"},{"label": "d", "value": "d"},{"label": "e", "value": "e"},];/* your initial dropdown data. can be any other data*/
const  dropdowns  = ["dropdown1", "dropdown2", "dropdown3"];//add your dropdowns
const dropdownsLength = dropdowns.length;
let dropdwnsSelector  =  "";
$w.onReady(function () {
 for(let i = 0; i < dropdownsLength; i++){
        $w("#" + dropdowns[i]).options = data;
        dropdwnsSelector += `#${dropdowns[i]},`
    }
    dropdwnsSelector = dropdwnsSelector.substring(0, dropdwnsSelector.length - 1);
    $w(dropdwnsSelector).onChange((event) => {
 let eachDropdownSelection  = []; 
 for(let i = 0; i  < dropdownsLength;  i++){
 if($w("#" +  dropdowns[i]).valid){
     eachDropdownSelection[i] = $w("#" + dropdowns[i]).value;
    }
}
let notSelected = data.filter(e => !eachDropdownSelection.includes(e.value));
let uniqueOptions = [];
for(let i = 0; i  < dropdownsLength;  i++){
    uniqueOptions[i]  = [...notSelected];
 if($w("#" +  dropdowns[i]).valid) {uniqueOptions[i].push(data.find(e => e.value === eachDropdownSelection[i]));}
    uniqueOptions[i] = data.filter(e => uniqueOptions[i].includes(e))
    $w("#" +  dropdowns[i]).options = uniqueOptions[i];
    }
})
});
4

Thank you for this solution! Works great for my 3 security questions on sign up!

5

I tried this out and implemented it and it works great in the preview but does not work on the live site. Any ideas why?