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:
![](https://static.wixstatic.com/media/a27d24_77f98061be1b448fae1e2288adb509d6~mv2.png/v1/fill/w_798,h_343,al_c,q_85,enc_auto/a27d24_77f98061be1b448fae1e2288adb509d6~mv2.png)
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!
![](https://static.wixstatic.com/media/a27d24_d4c55106f2ff45e59680f01d5cbddc9a~mv2.png/v1/fill/w_862,h_379,al_c,q_85,enc_auto/a27d24_d4c55106f2ff45e59680f01d5cbddc9a~mv2.png)
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
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!