I have been working with @russian-dima on a problem and he has been super helpful. Right now i have this code below for 8 dropdowns and 8 images, in a mock database. But right now it is returning unexpected results on the mock page here:
https://www.media-junkie.com/image-list
The dropdowns are returning results from the line directly above it in the database. Example:selecting “something red” in the top left dropdown actually returns the image from the line above it in the database, corresponding to “Stone gray”
import wixData from ‘wix-data’;
//////// -------------------- [ USER- INTERFACE ] ---------------------///////////
// Put in here the name of your DATA-COLLECTION (attention —> Case-Sensitive!)
var DATABASE = “Materials” //[EXAMPLE] ----> “Materials”
// Put in here all your DropDown-Names here…(if your drop-downs have other names than the default ones.)
var DD1 = “dropdown1”
var DD2 = “dropdown2”
var DD3 = “dropdown3”
var DD4 = “dropdown4”
var DD5 = “dropdown5”
var DD6 = “dropdown6”
var DD7 = “dropdown7”
var DD8 = “dropdown8”
//////// -------------------- [ USER- INTERFACE ] ---------------------///////////
var myResults
$w.onReady(function () {
wixData.query(“Materials”)
.find()
.then( (results) => {
if(results.items.length > 0) {
myResults = results.items
const uniqueTitles1 = getUniqueTitles1(results.items);
const uniqueTitles2 = getUniqueTitles2(results.items);
const uniqueTitles3 = getUniqueTitles3(results.items);
const uniqueTitles4 = getUniqueTitles4(results.items);
const uniqueTitles5 = getUniqueTitles5(results.items);
const uniqueTitles6 = getUniqueTitles6(results.items);
const uniqueTitles7 = getUniqueTitles7(results.items);
const uniqueTitles8 = getUniqueTitles8(results.items);
// const uniqueTitles9 = getUniqueTitles9(results.items);
// const uniqueTitles10 = getUniqueTitles10(results.items);
$w("#"+DD1).options = buildOptions1(uniqueTitles1);
$w("#"+DD2).options = buildOptions2(uniqueTitles2);
$w("#"+DD3).options = buildOptions3(uniqueTitles3);
$w("#"+DD4).options = buildOptions4(uniqueTitles4);
$w("#"+DD5).options = buildOptions5(uniqueTitles5);
$w("#"+DD6).options = buildOptions6(uniqueTitles6);
$w("#"+DD7).options = buildOptions7(uniqueTitles7);
$w("#"+DD8).options = buildOptions8(uniqueTitles8);
function getUniqueTitles1(items) {const titlesOnly = items.map(item => item.referencefield1); return [...new Set(titlesOnly)];}
function buildOptions1(uniqueList1) {return uniqueList1.map(curr => {return {label:curr, value:curr};});}
function getUniqueTitles2(items) {const titlesOnly = items.map(item => item.referencefield2); return [...new Set(titlesOnly)];}
function buildOptions2(uniqueList2) {return uniqueList2.map(curr => {return {label:curr, value:curr};});}
function getUniqueTitles3(items) {const titlesOnly = items.map(item => item.referencefield3); return [...new Set(titlesOnly)];}
function buildOptions3(uniqueList3) {return uniqueList3.map(curr => {return {label:curr, value:curr};});}
function getUniqueTitles4(items) {const titlesOnly = items.map(item => item.referencefield4); return [...new Set(titlesOnly)];}
function buildOptions4(uniqueList4) {return uniqueList4.map(curr => {return {label:curr, value:curr};});}
function getUniqueTitles5(items) {const titlesOnly = items.map(item => item.referencefield5); return [...new Set(titlesOnly)];}
function buildOptions5(uniqueList5) {return uniqueList5.map(curr => {return {label:curr, value:curr};});}
function getUniqueTitles6(items) {const titlesOnly = items.map(item => item.referencefield6); return [...new Set(titlesOnly)];}
function buildOptions6(uniqueList6) {return uniqueList6.map(curr => {return {label:curr, value:curr};});}
function getUniqueTitles7(items) {const titlesOnly = items.map(item => item.referencefield7); return [...new Set(titlesOnly)];}
function buildOptions7(uniqueList7) {return uniqueList7.map(curr => {return {label:curr, value:curr};});}
function getUniqueTitles8(items) {const titlesOnly = items.map(item => item.referencefield8); return [...new Set(titlesOnly)];}
function buildOptions8(uniqueList8) {return uniqueList8.map(curr => {return {label:curr, value:curr};});}
} else {
// handle case where no matching items found
}
} )
.catch( (err) => {
let errorMsg = err;
} );
$w("#"+DD1).onChange(()=>{$w('#image1').src=myResults[$w("#"+DD1).selectedIndex].image1})
$w("#"+DD2).onChange(()=>{$w('#image2').src=myResults[$w("#"+DD2).selectedIndex].image2})
$w("#"+DD3).onChange(()=>{$w('#image3').src=myResults[$w("#"+DD3).selectedIndex].image3})
$w("#"+DD4).onChange(()=>{$w('#image4').src=myResults[$w("#"+DD4).selectedIndex].image4})
$w("#"+DD5).onChange(()=>{$w('#image5').src=myResults[$w("#"+DD5).selectedIndex].image5})
$w("#"+DD6).onChange(()=>{$w('#image6').src=myResults[$w("#"+DD6).selectedIndex].image6})
$w("#"+DD7).onChange(()=>{$w('#image7').src=myResults[$w("#"+DD7).selectedIndex].image7})
$w("#"+DD8).onChange(()=>{$w('#image8').src=myResults[$w("#"+DD8).selectedIndex].image8})
});
(by the way, you can improve this a lot).