hello everyone code Queen ideally if this is your first time watching get ready to learn some Wix code this video will show you how to remove dropdown duplicates and add a trigger conditional filtering based on the selection of the first drop-down it will also teach you how to connect your drop-down elements without using data sets regardless if this is your first time or tenth time using Wix code this video is for you click the subscribe button to stay updated with new tutorial upload check out other Wix code snippets on totally codable calm and please join the totally quotable Wix code group on Facebook before we get started click on the video description down below to find the link to this tutorial site so you can follow along be sure to watch the video till the very end for some troubleshooting tips just in case ready to begin let's get started once you land on the tutorial site you will see three examples of different drop-down elements let's look at the first example there are three drop-down elements with conditional filtering meaning drop-down two and three will auto-populate based on the selection made from the previous drop-down if I click on adventure this will trigger the next drop-down to enable if I click on the next option it'll trigger the last drop-down to enable allowing me to select only the options that are filtered for that specific category these two dropdowns are disabled on ready from the properties panel if you are using dropdowns to collect information in a form this code builds the options without duplicates and with the conditional formatting let's look at the example database collection first the example database for the first example is called category this collection has three different columns the first to have multiple matches the code that we add to the page will remove all of these duplicates for both of the columns now let's look at the code to see how this collection gets filtered as each drop-down element is changed on the tutorial site click on code at the top of the menu this is the first code it basically says unready a function will happen this function that is found here we'll actually perform a query to find all of the unique options for the first drop-down it searches under a single field key the field key is found in your database click on manage properties and you get the field key this field key matches the column that you want to search and filter then it'll find all of the unique titles it'll create the options list and insert and create the options for that specific drop-down this first function happens on ready because we need the first drop-down list to be populated when the page loads do you remember when I said that the second and third drop-down were disabled on ready through the properties panel well if you right-click on one of these dropdowns and select view properties you'll notice that ID selected enabled by default this causes them to be disabled when the page loads back to the code when you continue down the second piece of code is actually an export function which it says genre change the first drop-down button on change will do something in this case it'll enable the second function for the second drop-down following the same pattern performing a query on a database for a single field key inside of that first drop-down element then finding all of the unique titles building options for the second drop-down using a different field key or that option it also enables the second drop-down so as soon as they click on the first one the second one will turn on the code continues and it repeats the exact same thing when the second drop-down changes it triggers the third drop-down function which is here and it enables the third drop-down button let's move on to example 2 there are two drop-down elements with conditional filtering just like the first example the second drop-down is disabled so it prevents the user from selecting this it forces them to choose a selection from the first drop-down because it'll trigger the fill train for the second one once they selected the second drop-down is enabled and they're able to select their choice you let's look at the database collection for this example to see how it retrieves its options inside of the editor these dropdowns are connected to the database collection called location if you notice that only has two columns this column actually represents the first drop down and the second column represents the second drop down there are many duplicates in this first column but the code that we'll be using will remove all the duplicates just like in the first example let's take a look at that code if you scroll down the code page you'll see the second code this one basically says almost the same thing unready it'll perform the function called unique drop down 1 which basically means this function will do the same thing it'll perform a query on a database which we already said in this example is called location then it's going to find all of the unique titles for a specific column which we will use the field key to tell the code which column to check in this case the column will be state then it'll build all of the unique titles create a list and add that list as the options for that specific drop down in this case that'll be the first drop-down element then when it changes that first drop-down element will trigger the second drop down function and at the same time it will live in April the second drop-down element allowing the person to view the options and select their choice finally let's look at the third example in this one there are two drop-down elements with conditional filtering but each drop-down element is connected to a different data set which are actually also connected to do different database collections let's look at those collections inside of the editor you this first drop-down is connected to this data set it's called the list of states the list of states is actually a collection that was created as an index just to have a list in the form of a database collection this collection is called States when you click on States you will see a small list just to use as a reference or an index for the filtering purposes of the code so it has the four different states here these four different states match the second collection that is used for the second drop-down element which is the city the city is connected to this data set and this data set is collected to the location database collection because in the location database collection is where all of the cities are listed but also being referenced by state these states match the index so when this index matches one of these states these two collections will filter each other so that way the correct City is displayed on the drop-down element now with this second example we will use only a little bit of code to tell it what to do let's take a look at that code continue scrolling down towards the bottom and in the very last piece of code for the two dropdowns there is no unready code but there is an export function when the first drop-down element changes so you've triggered an on change event for that element it triggers a filter code this function is called the location city filter here it first enables the second drop-down element and then it begins to filter that data set that is connected to the second drop-down element it will search for a field key which in this case will be the state because the state column is the one column that both collections have in common and that state is actually listed on the first drop-down element and that's it that's the code for the last example now that you learned what each example does and what the code says go back and study the different drop-down combinations select the right combination for you and then go through the code and start changing out the pieces of code that are in color the unique drop-down one function this is a made-up word you can label it whatever you want the collection is the name of your database collection the drop-down name one is the name of your first drop-down and the field key is the field key that we found in the database collection go through the code swap out these and inside the editor make sure that you trigger every single drop down that triggers one of those codes so you right-click view properties click on unchanged click enter and this is the name that you will be using for your code located here under the function now for some troubleshooting tips if you still don't see your options in your drop-down make sure to check your database permissions click on the database and it permissions check to see if anyone can read or if you have set it to site member only if yes then don't forget to sign in so you can test it otherwise you won't be seeing any options in your drop-down you also have you synced your database click on a collection click on the word sink and send all items to live make sure that you save and publish your site as well if the fill train is still not working go back and check for misspelled words check to make sure that your element IDs or the hashtag names are written correctly if you have the wrong one the code will not work also checked out the few Kizer spelled correctly and that you've written the correct one even if you miss one letter it will break the coat check that the name of your database collection is correct and that there are no letters missing every capital and lowercase letter count check that each function that is triggered by a change has that specific event triggered on that element if it's a non change event make sure that there's an unchanged code here if you still need help please join the totally quotable wix code Facebook group go ahead and feel free to post screenshots on your questions there are a lot of Wix users in Wix code experts that are ready to help you can also check out totally codable calm to find help from other expert coders or designers like myself I hope you subscribe give this video a thumbs up see you again soon bye .
This video is new-coder-friendly. If you have NEVER tried Wix Code before, you can start with this video!
These are the links you will need to follow the Code Queen video:
Link to Tutorial Site:
Remember to join the Facebook group to participate in Facebook Live Q&A's with the Code Queen!
Contact Code Queen:
Totally Codable Logo by:
Code Queen logo by:
Video Intro by: Code Queen