(SOLVED) Drop down menu to display relevant collapsed boxes

Ask the community
, ,
1


Hi,

I was wondering if someone would be able to point me in the right direction with a problem I have been trying to figure out for my client input forms.

Basically I’m looking to achieve, if the user selects ‘2’ from the drop down, then this will display two identical but separate collapsed boxes. if they select ‘3’ then this will display three collapsed boxes and so on.

1198×701 14.9 KB

I have read through lots of the coding API and other threads, videos and have came up with the following code, I know I need to make this more comprehensive, but I just want to work out how to get the onchange() to actually change the displayed outcome. Anyway here is the code

export function participants_onchange(event, $w) {
$w(“#participants”).onChange( (event, $w) => {
//“getdropdownvalue”
let newvalue = event.target.value; // “1”
$w(“#participantbox1”).expand();
$w(“#participantbox2”).expand();
});
}

I hope someone can help, I have a little coding experience, which has been very rewarding but haven’t used onchange much and I’m struggling to find the answer to this problem.

Thank you for all your hard work and help to all the people on this forum.

Stephen

1 Like
2

This code solved the problem :slight_smile:

export function participants_onchange(event, $w) {
//
if (event.target.value === ‘value1’) {
$w(‘#participantbox1’).expand();
$w(‘#participantbox2’).collapse();
$w(‘#participantbox3’).collapse();
$w(‘#participantbox4’).collapse();
}

 if (event.target.value === 'value2') { 
	$w('#participantbox1').expand(); 
	$w('#participantbox2').expand(); 
	$w('#participantbox3').collapse(); 
	$w('#participantbox4').collapse(); 
 } 
 if (event.target.value === 'value3') { 
	$w('#participantbox1').expand(); 
	$w('#participantbox2').expand(); 
	$w('#participantbox3').expand(); 
	$w('#participantbox4').collapse(); 
 } 
 if (event.target.value === 'value4') { 
	$w('#participantbox1').expand(); 
	$w('#participantbox2').expand(); 
	$w('#participantbox3').expand(); 
	$w('#participantbox4').expand(); 
 }

}