Code For 3 Dependent DropDown From Collection in Velo

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 3

1 import wixData from 'wix-data';

2
3
4
5 $w.onReady(function () {
6
7 uniqueDropDown1();
8
9 });
10
11
12
13 function uniqueDropDown1 (){
14
15 wixData.query("collection")
16
17 .limit(1000)
18
19 .find()
20
21 .then(results => {
22
23 const uniqueTitles = getUniqueTitles(results.items);
24
25 $w("#dropdownName1").options = buildOptions(uniqueTitles);
26
27 });
28
29 function getUniqueTitles(items) {
30
31 const titlesOnly = items.map(item => item.fieldkey);
32
33 return [...new Set(titlesOnly)];
34
35 }
36
37 function buildOptions(uniqueList) {
38
39 return uniqueList.map(curr => {
40
41 return {label:curr, value:curr};
42
43 });
44
45 }
46
47 }
48
49
50
51 export function genre_change(event, $w) {
52
53 uniqueDropDown2();
54
55 $w("#dropdownName2").enable();
56
57 }
58
59
60
61 function uniqueDropDown2 (){
62
63 wixData.query("collection")
64
65 .contains("fieldkey", $w("#dropdownName1").value)
66
67 .limit(1000)
68
69 .find()
70
71 .then(results => {
72
73 const uniqueTitles = getUniqueTitles(results.items);
74
75 $w("#dropdownName2").options = buildOptions(uniqueTitles);
76
77 });
78
79 function getUniqueTitles(items) {
80
81 const titlesOnly = items.map(item => item.fieldkey);
82
83 return [...new Set(titlesOnly)];
84
85 }
86
87 function buildOptions(uniqueList) {
88
89 return uniqueList.map(curr => {
90
91 return {label:curr, value:curr};
92
93 });
94
95 }
96
97 }
98
99
100
101 export function subcategory_change(event, $w) {
102
103 uniqueDropDown3();
104
105 $w("#dropdownName3").enable();
106
107 }
108
109
110
111 function uniqueDropDown3 (){
112
113 wixData.query("collection")
114
115 .contains("fieldkey", $w("#dropdownName2").value)
116
117 .limit(1000)
118
119 .find()
120
121 .then(results => {
122
123 const uniqueTitles = getUniqueTitles(results.items);
124
125 $w("#dropdownName3").options = buildOptions(uniqueTitles);
126
127 });
128
129 function getUniqueTitles(items) {
130
131 const titlesOnly = items.map(item => item.fieldkey);
132
133 return [...new Set(titlesOnly)];
134
135 }
136
137 function buildOptions(uniqueList) {
138
139 return uniqueList.map(curr => {
140
141 return {label:curr, value:curr};
142
143 });
144
145 }
146
147 }

You might also like