Linking dropdown with Multi State Boxes

Ask the community
,
1

How to link a dropdown with Multi State Boxes?

More specifically, I have my Multi State Boxes set up to change states when buttons are clicked, so that’s working fine.

However, I would like to create a modified version of this function. Instead of being triggered by buttons, can I use dropdowns to trigger this change in state?

Thank you so much for any help!

2

You have your 2 elements on your page —> (multi-state-boxes & dropdowns).

Dropdowns have values and indexes.
You could use both of them to navigate to a specific state of your MSB (multi-state-box).
https://www.wix.com/velo/reference/$w/dropdown
https://www.wix.com/velo/reference/$w/multistatebox

-getting value out of dropdown:

let myValue =$w("#myDropDown").value;// "42"

-using the right event:

$w("#myDropDown").onChange(()=>{ });

-not forgetting to put all into the onReady-Command.

$w.onReady(()=>{
   $w("#myDropDown").onChange(()=>{ 
      //your code here....
   });
});

Changing the MSB by using the dropdown…

$w.onReady(()=>{
   $w("#myDropDown").onChange(()=>{ 
      let selectedValue = $w("#myDropDown").value
      $w('#myMSB').changestate(selectedValue)
   });
});

To avoid errors, add some time delay before get the value of the dropdown…

$w.onReady(()=>{
   $w("#myDropDown").onChange(()=>{
      setTimeout(()=>{
         let selectedValue = $w("#myDropDown").value
         $w('#myMSB').changestate(selectedValue)
      },100);
   });
});

That should do it.

3

Hi there! Thank you so much for your response. I can’t thank you enough, I managed to get it working and I couldn’t have done it without your help! :slight_smile:

For all those that are curious, this works concurrently for both buttons and dropdown! I’ve enabled buttons to show on desktop and the dropdown to show on mobile (for a more user-friendly interface).

4

@calciumsulfated No problem. Good luck with your project.:wink: