Help adding multiple onChange to drop down menu

Ask the community
,
1

Hi guys!

I am new to web development and coding. I am wondering how I can add multiple event changes to occur on one drop down menu. Ideally, I want someone to be able to click “monthly membership” and a text box will appear and show the price. When someone clicks to “annual membership”, I want the monthly membership textbook to collapse and only show the annual price.

So far, I have created my drop down menu with code:

$w(“#membershipplansdropdown”).options = [
{“label”: “monthly membership”, “value”: “#monthlyprice”},
{“label”: “annual membership”, “value”: “#annualprice”},
];

which looks like this:

798×343 90.5 KB

I added a text box and have it collapse on load. I added in an event change through the drop down menus properties:
export function membershipplansdropdown_change(event) {
let q = $w(‘#monthlyprice’);
let a = $w(‘#monthlyprice’);
if (a.collapsed) {
q.value = “#monthlyprice”.concat(q.text.substring(1));
a.expand();
}
else {
q.value = “#monthlyprice”.concat(q.text.substring(1));
a.collapse();
}
and when monthly membership is clicked I get this, which is exactly what I want!

862×379 34.4 KB

Now I need help with adding in the same event change/effect for when the user clicks on annual membership, except the $40/month disappears and the annual price appears in its place. Ideally, the user could toggle back and forth between membership prices through the drop down menu. Does anyone know how I can do this? I tried creating another text box on top of this one, and repeating the process (collapse it on load, and add the same event change code but change the #monthlyprice to #annualprice, but it is just not working. The text boxes end up both appearing over each other and I end up with nothing appearing for the other choice.

Thank you!

#dropdownmenu #collapse #eventchange

2

I suggest that you assign your second variable to the yearly cost, let a = $w(’ #yearlyprice '). As you can see below, I implemented your code with a text element that is collapsed on load but displays the selected option:

export function membershipplansdropdown_change(event) {
let q = $w(‘#monthlyprice’);
let a = $w(‘#yearlyPrice’);
if ($w(“#membershipplansdropdown”).selectedIndex === 0) {
q.value = “#monthlyprice”.concat(q.text.substring(1));
$w(‘#text1’).text = “Our monthly plan costs " + q.value;
$w(‘#text1’).expand();
} else if ($w(”#membershipplansdropdown").selectedIndex === 1) {
a.value = “#monthlyprice”.concat(q.text.substring(1));
$w(‘#text1’).text = "Our yearly plan costs " + a.value;
$w(‘#text1’).expand();
} else {
$w(‘#text1’).collapse();
}
}

I hope this helps.

Cheers!