Thank you so much for the help.
I still seem to be missing a definition for wixData though (hence why i thought i had to have datasets added)
please see attached image. it also indicates that “myResults” is not defined
Sorry my bad, i do not know why i forgot to copy&paste the first two lines.
Look here…
import wixData from 'wix-data';
var myResults
$w.onReady(function () {
wixData.query("Materials").find()
.then( (results) => {
if(results.items.length > 0) {
myResults = results.items
} else {
// handle case where no matching items found
}
} )
.catch( (err) => {
let errorMsg = err;
} );
$w('#dropdown1').onChange(()=>{
$w('#image1').src=myResults[$w('#dropdown1').selectedIndex].image
})
});
Now your code should work again.
“myResults” was red marked because this variable was used but not defined!
And always when you work with DATA you need first to import…
import wixData from ‘wix-data’;
Good luck & happy coding.
Thank you SO MUCH @russian-dima. Works great. Super awesome of you to take the time to help!
No problem
i shot you an email.
Got it. 
Hi Dima,
Found your thread talking about dropdown linking the image at the same page. Super helpful! But I meet a problem to combine your code to the conditional dropdowns code (learned from the other thread). I let the first dropdown filter out duplicates in one fieldkey to create a list, and then the second dropdown will be triggered to show the other fieldkey corresponding to first fieldkey selected. The last step is using your code to show the options under the second dropdown.
However, it seems the image shows is not following the list be created by the first dropdown. Feeling I might miss something in the code to let images follow the list of reduced duplicates. Here is the code I got:
import wixData from 'wix-data';
$w.onReady(function () {
uniqueDropDown1();
});
function uniqueDropDown1 (){
wixData.query('test')
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdown1").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.main);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function dropDown1_change(event, $w) {
uniqueDropDown2();
$w("#dropdown2").enable();
}
function uniqueDropDown2 (){
wixData.query('test')
.contains("main", $w("#dropdown1").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdown2").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.sub);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
var myResults
$w.onReady(function () {
wixData.query('test').find()
.then( (results) => {
if(results.items.length > 0) {
myResults = results.items
} else {
// handle case where no matching items found
}
} )
.catch( (err) => {
let errorMsg = err;
} );
$w('#dropdown2').onChange(()=>{
$w('#image5').src=myResults[$w('#dropdown2').selectedIndex].image
})
});
I also attach the screenshot of the dataset:
Being a beginner at coding. Do appreciate it if you could help with this case. Thanks!
Will take a look on it (soon), if i will find enough freetime (working on own projects at the moment).
Dima, NP, thanks a lot for the reply.
@laughingjesuit
Here try this one…
import wixData from 'wix-data';
var myDatabase = 'test'
$w.onReady(function () {console.log("CODE-START")
uniqueDropDown1();
$w('#dropdown1').onChange(()=>{
$w("#dropdown2").enable();
setTimeout(()=>{
let dd1Value = $w("#dropdown1").value
uniqueDropDown2(dd1Value);
},100)
})
});
//--------- Drop-Down-1 --------------------------
function uniqueDropDown1 (){console.log("Build unique DropDown-1")
wixData.query(myDatabase)
.limit(1000)
.find()
.then((res1)=>{
let items1 = res1.items
const uniqueTitles1 = getUniqueTitles1(items1);
let ddOptions1 = buildOptions1(uniqueTitles1);
console.log(uniqueTitles1)
console.log(ddOptions1)
$w("#dropdown1").options = ddOptions1;
});
}
function getUniqueTitles1(items) {
const titlesOnly = items.map(item => item.main);
return [...new Set(titlesOnly)];
}
function buildOptions1(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
//--------- Drop-Down-2 --------------------------
function uniqueDropDown2(dd1Value){console.log("Build unique DropDown-2")
wixData.query(myDatabase)
.limit(1000)
.contains("main", dd1Value)
.find()
.then((res2)=>{
let items2 = res2.items
console.log(items2);
const uniqueTitles2 = getUniqueTitles2(items2);
let ddOptions2 = buildOptions2(uniqueTitles2);
console.log(uniqueTitles2)
console.log(ddOptions2)
$w("#dropdown2").options = ddOptions2;
});
}
function getUniqueTitles2(items2) {
const titlesOnly = items2.map(item => item.main);
return [...new Set(titlesOnly)];
}
function buildOptions2(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
Hi Dim, Thanks for the update! I tried it and realize two thing: 1. under the drop down 2 the “getgetUniqueTitles2” should be defined as to map item.sub instead of main, otherwise the two dropdowns will show the same content. 2. It seems your code doesn’t contain the function of showing the image according to dropdown 2 selection on the same page. My initial issue is when selecting the options in the dropdown2, the image shows the wrong one (not matching to the database). See the screenshot:
Appreciate the help on this. I feel it will be helpful to learn how the image shows the filtered content from the database.
1. under the drop down 2 the “getgetUniqueTitles2” should be defined as to map item.sub instead of main, otherwise the two dropdowns will show the same content
Yes you’re right (a stupid copy & paste failure of me sorry).
import wixData from 'wix-data';
var myDatabase = 'test'
$w.onReady(function () {console.log("CODE-START")
uniqueDropDown1();
$w('#dropdown1').onChange(()=>{
$w("#dropdown2").enable();
setTimeout(()=>{
let dd1Value = $w("#dropdown1").value
uniqueDropDown2(dd1Value);
},100)
})
});
//--------- Drop-Down-1 --------------------------
function uniqueDropDown1 (){console.log("Build unique DropDown-1")
wixData.query(myDatabase)
.limit(1000)
.find()
.then((res1)=>{
let items1 = res1.items
const uniqueTitles1 = getUniqueTitles1(items1);
let ddOptions1 = buildOptions1(uniqueTitles1);
console.log(uniqueTitles1)
console.log(ddOptions1)
$w("#dropdown1").options = ddOptions1;
});
}
function getUniqueTitles1(items) {
const titlesOnly = items.map(item => item.main);
return [...new Set(titlesOnly)];
}
function buildOptions1(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
//--------- Drop-Down-2 --------------------------
function uniqueDropDown2(dd1Value){console.log("Build unique DropDown-2")
wixData.query(myDatabase)
.limit(1000)
.contains("sub", dd1Value)
.find()
.then((res2)=>{
let items2 = res2.items
console.log(items2);
const uniqueTitles2 = getUniqueTitles2(items2);
let ddOptions2 = buildOptions2(uniqueTitles2);
console.log(uniqueTitles2)
console.log(ddOptions2)
$w("#dropdown2").options = ddOptions2;
});
}
function getUniqueTitles2(items2) {
const titlesOnly = items2.map(item => item.sub);
return [...new Set(titlesOnly)];
}
function buildOptions2(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
- By a maden choice in dropdown1 you enable and fill the dropdown2 with unique items found in —>“main”.
- When you make a choice in dropdown2 nothing happens, because the event-handler for dropdown2 is not existing. Ihoped you would be able to add this to your code, because you have already have an example with dropdown1.
Anyway, you will have to add this code part, to get your second dropdown to work…
$w('#dropdown2').onChange(()=>{ here your function, what shall happen now? });
Hmm… I’ve added showing image when dropdown2 change but the image order still is not right.
now when selecting apple it shows dog; select banana it shows apple, and choose back dog, nothing will happen.
Here is my code. (Maybe wrong with the “selectedIndex”? )
import wixData from 'wix-data';
var myDatabase = 'test'
$w.onReady(function () {console.log("CODE-START")
uniqueDropDown1();
$w('#dropdown1').onChange(()=>{
$w("#dropdown2").enable();
setTimeout(()=>{
let dd1Value = $w("#dropdown1").value
uniqueDropDown2(dd1Value);
},100)
})
});
//--------- Drop-Down-1 --------------------------
function uniqueDropDown1 (){console.log("Build unique DropDown-1")
wixData.query(myDatabase)
.limit(1000)
.find()
.then((res1)=>{
let items1 = res1.items
const uniqueTitles1 = getUniqueTitles1(items1);
let ddOptions1 = buildOptions1(uniqueTitles1);
console.log(uniqueTitles1)
console.log(ddOptions1)
$w("#dropdown1").options = ddOptions1;
});
}
function getUniqueTitles1(items) {
const titlesOnly = items.map(item => item.main);
return [...new Set(titlesOnly)];
}
function buildOptions1(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
//--------- Drop-Down-2 --------------------------
function uniqueDropDown2(dd1Value){console.log("Build unique DropDown-2")
wixData.query(myDatabase)
.limit(1000)
.contains("main", dd1Value)
.find()
.then((res2)=>{
let items2 = res2.items
console.log(items2);
const uniqueTitles2 = getUniqueTitles2(items2);
let ddOptions2 = buildOptions2(uniqueTitles2);
console.log(uniqueTitles2)
console.log(ddOptions2)
$w("#dropdown2").options = ddOptions2;
});
}
function getUniqueTitles2(items2) {
const titlesOnly = items2.map(item => item.sub);
return [...new Set(titlesOnly)];
}
function buildOptions2(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
var myResults
$w.onReady(function () {
wixData.query('test').find()
.then( (results) => {
if(results.items.length > 0) {
myResults = results.items
} else {
// handle case where no matching items found
}
} )
.catch( (err) => {
let errorMsg = err;
} );
$w('#dropdown2').onChange(()=>{
$w('#image5').src=myResults[$w('#dropdown2').selectedIndex].image
})
});
First try to get your right result by your own. Like i always say → learning by doing. Your BEST-FRIEND ==> CONSOLE.
Use more the console to inspect the behaviour of your code. What happens at which part of your code? What you will do right now, is called → DEBUGING.
The best way to DEBUG CODE, is to use the CONSOLE.
If you still can’t reach your aim after some sirious tries to debug your code, you can write here again, to get more help.