Export chosen dropdown option to display option-specific text information

I have 2 dropdown boxes - one contains the product type (i.e. jar, tin, bottle) and the other is the product size (i.e. small, med, large). I want users to be able to select their product type and then the product size and have a text box beneath the dropdowns show relevant information to that specific option set

For example:

Product Type : Jar
Product Size : Small
The text will display:

  • Dimensions/Size: 12.5cm (H) x 6.5cm (Dia.)

  • Material: Cork and polyethylene (PE)

  • BPA free

I know absolutely nothing about coding or datasets and have built my entire website using the very basic features of Wix Editor.

Any help on how to achieve my desired functionality would be very appreciated!! Thanks so much in advance.

UPDATE: I got this to work through datasets and this code.

I made the Column within my Dataset include both phrases that were used in my two dropdown options - i.e. my Title column contained: “Large Jar”, “Small Jar”, “Small Tin”, etc.

The + " " + in the code signifies the space between the two words and the code itself searches in the column (Title) for the two terms in each dropdown box. Delete the + " " + if you don’t have a space between words listed in the dataset

I have this code set to load the new text information whenever either dropdown is altered.

Code:

import wixData from ‘wix-data’ ;

$w.onReady( function () {

$w( ‘#FirstDropdownName’ ).onChange(() => {

//when taking too long to load, will display this message

$w( '#TextboxName' ).text =  "Loading list..." 

wixData.query( “NameofDataSet” ).eq( “ColumnWithinDataset” ,$w( '#FirstDropDownName ).value+ " " +$w( '#SecondDropdownName ).value).find().then( (results) => {

if (results.items.length > 0 ) {

let firstItem = results.items[ 0 ];

$w( '#TextboxName' ).text = results.items[ 0 ].ingredients; 


}  **else**  { 

$w( '#TextboxName’ ).text =  "Error. Please reselect the options." ; 


} 

} )
. catch ( (err) => {
let errorMsg = err;
} );

})

$w( '#SecondDropdownName ).onChange(() => {

$w( '#TextboxName' ).text =  "Loading list..." 

wixData.query( “NameofDataSet” ).eq( “ColumnWithinDataset” ,$w( '#FirstDropDownName ).value+ " " +$w( '#SecondDropdownName ).value).find().then( (results) => {

if (results.items.length > 0 ) {

let firstItem = results.items[ 0 ];

$w( '#TextboxName' ).text = results.items[ 0 ].ingredients; 


}  **else**  { 

$w( '#TextboxName' ).text =  "Error. Please reselect the options." ; 


} 

} )
. catch ( (err) => {
let errorMsg = err;
} );

})});

It’s not the prettiest looking, but it gets the job done!

Thanks :slight_smile: