Dependent Drop Down Lists

Ask the community
,
1

Hi

Does anyone have an example how to implement a dependent Drop Down Lists mechanism?
lets say that i have dropdown list #1 where all of it’s items are taken from a dataset.
Now, based on what i chose in dropdown list #1 - i want dropdown list #2 to display it’s relevant items (also from dataset).

Thanks,
Roy

3 Likes
2

Hello Roy

From what i see now, this Q is candidate to using Filter By Value feature

You can create 2 datasets. And filter one dataset on value, which is current in another dataset
but, this can be done only if you have two collections - one for all categories, another for categories+subcategories+data

Can you please describe more what is your purpose and how your data is organized?

3

Hello Mikhail

lets say that i have a database like this :

i want the first drop down to allow me to choose the TEAM (1, 2 or 3)
So lets say that i clicked on 2
The next drop down list will show only CCC and DDD.
So the second drop down list is dependent on what i have chosen on the first drop down.

Thanks,
Roy

4

Hi again!

https://mikhails8.wixsite.com/mysite-355

Is this what you need?
If yes i will explain how to achieve this

1 Like
5

Hello Mikhail
Yes.
That looks good for me :slight_smile:
Can you please explain how to do it?

Thanks,
Roy

6

Hello Mikhail,
I’m also very interested in how to achieved this for my site. Thanks for explaining more and with code if possible.

Best regards

7

It’s achieved without code actually

So, you need two collections.
First is actual data:
https://www.screencast.com/t/n0BVyxG0fMf
Second is a list of teams (first dropdown)
https://www.screencast.com/t/bueWCaEtvdrg

Then you create 2 dropdowns and 2 datasets (both read/write)

First dropdown connected to the teams dataset:
https://www.screencast.com/t/MoGpOwBDQayw
It selects current team

Second dropdown connected to data dataset:
https://www.screencast.com/t/BKNaKFqJaxf2

And, second dataset (data dataset) is filtered on first one. This is settings:
https://www.screencast.com/t/toIoweMgg4f7

So, idea is that values in data dataset are filtered - it shows onlyt those items, which has “title” value SAME as currently selected in teams dataset
When you select smth other in first dropdown, it changes its value to another team
Values in second datsset are filtered automatically - only those which has changed value of “teams” field

There is no code here, only UI connections

1 Like
8

Hello Mikhail

Thanks for the quick answer.
Your solution is good, and works on a test page i made, but maybe fit for a situation where there are 2 databases.

I want to use your logic, but to insert the selections of both drop-down lists to a third database.
(i have 3 databases on that page)

So, basically i want to select a team with the first drop-down, then select a relevant person from that team with the second drop-down and to insert those 2 values (team and person) to a third database.

Do you have any design or code that could support that please?

Thanks,
Roy

9

You can add button with submit action, connect it to the second dataset.

In the connection panel for second dropdown, select third dataset (write only for example) and proper field for name of the player.

At this point, when user selects smth from second dataset, and clicks submit, it will be written to the third database. But - without a team

I think this is max what you can do without coding))

Another decision - with code
Using code part, you can add to this structure function, which will be executed onClick, takes values from both datasets with this

And, using this -

inserts those two taken values to the third collection

10

Hi,

Is there something else you have to set to be able to filter by dataset?
I ask this because with my filter I am not able to filter by dataset as shown in the screenshot below:

Compared to your example where you do have the dataset filter option:
https://www.screencast.com/t/toIoweMgg4f7

Thanks,
Kris

11

Hello Mikhail,

This is exactly what I want to do, except I want to use my dropdown menu information to allow my members to find other members in the state that they live in, any other U.S. state, or another country (if they choose to do so) outside of the U.S.

How can I add a list of all 50 states, or even overseas provinces to dropdown box #2 (and for it to switch automatically) when someone chooses what country they would like to find another member on my website?

Best Regards

12

Where you had “first”, “second”, “third” in your dropdown box example I would like to have “United States”, and other countries on the list in dropdown box #1. And where you had “aaaaaa”, “bbbbbb”, “cccccc” in dropdown box #2 I would like to have a list U.S. states (Alabama, Arizona, Arkansas…etc), or Provinces in other countries.

I hope I’m saying this correctly.

13

@Kris - Hi!

You can change it with this arrow - 2018-01-15_1628
“Value” is for static filtering, “Dataset” is to filter dependent on value from another dataset

14

Hey Mikhail,

THANKS!!!

15

@Mikhail - Hi,
I wanted to deploy a dependent dropdown list with the 1st dropdown containing Category (from AdvCategory Collection) and the 2nd dropdown containing Unique Visitors Per Month (from UniqueVisitors Collection) which is dependent on the selection made in the 1st dropdown. The results would be shown in a table (hidden on show).

I followed your recommendation to @Kris previously but could not replicate the results.

  1. An overview of the datasets, fields and codes used.

1012×1600 144 KB

2. Data search results in 2nd dropdown not accurate:

949×316 16.8 KB

3. Filtering condition used for 2nd dropdown:

608×576 52 KB

4. Would appreciate enhancement suggestions beyond this:
a. How to deploy a reset on the search dropdown at the end of the search exercise because the current one does not reset to default.
b. The table does not display the correct data as required by the 2nd dropdown condition.
c. How to filter out the duplicates in 1st dropdown (there’s a prior case in the forum but was not conclusive to me: https://www.wix.com/code/home/forum/questions-answers/filtering-gallery-in-response-to-drop-down-menu-options)…probably due to my infant coding skills.

16

Mikhail
how I wish you have made a video tutorial

It’s achieved without code actually

So, you need two collections.
First is actual data:
https://www.screencast.com/t/n0BVyxG0fMf
Second is a list of teams (first dropdown)
https://www.screencast.com/t/bueWCaEtvdrg

Then you create 2 dropdowns and 2 datasets (both read/write)

First dropdown connected to the teams dataset:
https://www.screencast.com/t/MoGpOwBDQayw
It selects current team

Second dropdown connected to data dataset:
https://www.screencast.com/t/BKNaKFqJaxf2

And, second dataset (data dataset) is filtered on first one. This is settings:
https://www.screencast.com/t/toIoweMgg4f7

So, idea is that values in data dataset are filtered - it shows onlyt those items, which has “title” value SAME as currently selected in teams dataset
When you select smth other in first dropdown, it changes its value to another team
Values in second datsset are filtered automatically - only those which has changed value of “teams” field

There is no code here, only UI connections

17

Dear Mikhail

Another decision - with code
Using code part, you can add to this structure function, which will be executed onClick, takes values from both datasets with this
https://www.wix.com/code/reference/$w.Dropdown.html#value
And, using this -
https://www.wix.com/code/reference/wix-data.html#insert
inserts those two taken values to the third collection

Thanks for the quick answer.
Your solution is good, and works on a test page i made, but maybe fit for a situation where there are 2 databases.
I want to use your logic, but to insert the selections of both drop-down lists to a third database.
(i have 3 databases on that page)
So, basically i want to select a team with the first drop-down, then select a relevant person from that team with the second drop-down and to insert those 2 values (team and person) to a third database.
Do you have any design or code that could support that please?

18

How to create a filter search for a repeater

19

Hi Rishabh,
Check out this thread .
Good luck!
Roi

20

Hi Mikhail ,

I am trying to achieve same dependent drop down by the steps given by you , but drop down list is not appearing on the UI.

1333×691 103 KB

https://www.worksheetsforpractice.com/question-bank
Grades dataset is read and write.
What am I doing incorrectly ?