Add a section to a page that changes based on dropdown

Ask the community
,
1

Dear community.

I got a Dropdown menu with diffrent options and I need a section under that menu that changes based on the selected value of the dropdown menu.

It looks like this:

499×572 3.2 KB

Until now I worked with a simple code:
export function dropdown1_change(event, $w) {
if (event.target.value === “Value1”) {
$w (“#box2”).show();
} else {
$w (“#box2”).hide();
}
if (event.target.value === “Value2”) {
$w (“#box1”).show();
} else {
$w (“#box1”).hide();
}
if (event.target.value === “Value3”) {
$w (“#box3”).show();
} else {
$w (“#box3”).hide();
}

The problem is, I need 100+ diffrent boxes (sections). I can’t just lay one box on top of the other a 100 times and hide all other with the code, I think this will slow down the page and is troublesome if I need to do some changes on some boxes. I need to create 100+ sections for 100+ values in the dropdown menu.

Is there an other more clean way to show diffrent sections based on choosen values in the dropdown menu?

Best regards

2

I would use a repeater and make all content in that box dynamic and populate the repeater with that data onChange. Will be speedy. Depending of course on what you are going to have in your boxes.

3

Thanks for the answer. Depending of course on what you are going to have in your boxes. There will be 1 contact form and 1-4 small boxes.

4

You can add an onChange event to the dropdown and check the value selected. If the value selected is the relevant one, show a strip with all the relevant user inputs / elements. Note that the strip should be hidden in the first place.

I hope it’s clear,
Tal.

5

It worked perfectly with the code from andreas

import wixData from 'wix-data' ;
			
let selectedBezirk = "";
			

			
export function dropdown1_change(event, $w) {
	wixData.query("Bezirke")
	.eq("title", $w("#dropdown1").value)
	.find()
	.then( (results) => {
		let firstItem = results.items[0];
		selectedBezirk = firstItem._id;
		
		wixData.query("repeaterdata")
		.eq("referenz" ,selectedBezirk)
		.find()
		.then ( (results) => {
			$w("#repeater1").data = results.items;
			 } )
			.catch( (err) => {
				let errorMsg = err;
				});
			});
6

hi chris im working on a similar thing but my requirement is that repeater shouldnt be visible on page unless you select an item from the dropdown list. I appreciate any help.