Hi everyone, I’m beginner in Corvid and I’ve a big problem with a page of my website.
My goal is to realize:
-
5 cascading dropdown connected with the data of my collection (arrow brown in the picture). They are: " Regione, Provincia, Comune, Zona, Destinazione d’uso", in which the options of each one depends on option chosen in previous dropdown. (Picture 1)
-
After I need three “auto-fill” input field in which the values (green in the picture) depends on the choice done in previous dropdown: “Destinazione d’uso”. The values are in the same collection.
I done first point with that tutorial: https://codequeen.wixsite.com/dropdown/code
Unfortunately I can’t reach 2 goal, I’ve seen tutorial, read discussion on that forum, but nothing. I’m desperate, seriously! Can you help me please? I show you also a picture of database in which there are the data. I post also the code:
import wixData from ‘wix-data’;
$w.onReady(function () {
uniqueDropDown1();
});
function uniqueDropDown1 (){
wixData.query("definitiva")
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#Regione").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.regione);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function Regione_change(event, $w) {
uniqueDropDown2();
$w(“#Provincia”).enable();
}
function uniqueDropDown2 (){
wixData.query("definitiva")
.contains("regione", $w("#Regione").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#Provincia").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.provincia);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function Provincia_change(event, $w) {
uniqueDropDown3();
$w(“#Comune”).enable();
}
function uniqueDropDown3 (){
wixData.query("definitiva")
.contains("provincia", $w("#Provincia").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#Comune").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.comune);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function Comune_change(event, $w) {
uniqueDropDown4();
$w(“#Zona”).enable();
}
function uniqueDropDown4 (){
wixData.query("definitiva")
.contains("comune", $w("#Comune").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#Zona").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.zona);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function Zona_change(event, $W) {
uniqueDropDown5();
$w(“#Destinazioneduso”).enable();
}
function uniqueDropDown5 (){
wixData.query("definitiva")
.contains("zona", $w("#Zona").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#Destinazioneduso").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.destinazioneDUso);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
Very thanks in advance!
