Skip to main content
Question

Need help on building checkbox and dropdown menu working simultaneously


Hello everyone,

Can anyone tell me how to make multiple drop down menus + checkbox. I am trying to make a day and time filter.

  1. The user can have the checkbox checked and adjust the time range for that certain day.
  2. The user can click on the dropdown menu to see can scroll to select the time.
  3. Once selected, the actual time will appear on the “open time” or “close time” box. Please refer to the picture below.
  4. If the checkbox is not checked, how “open time” and “close time” will become grey, and not selectable.

Please let me know or provide the tutorial on how to make this. Your help is greatly appreciated. I have tried following the youtube videos, but they only teach me how to make them work separately. I want to build an interactive component for the checkbox and dropdown menus to work simultaneously. Your help is greatly appreciated.

3 replies

gilgongo
  • 51 replies
  • August 3, 2023

While it would involve a lot of variables (perhaps at least 21), you could try creating a variable for each checkbox which then sets the state of its related objects (the checked/unchecked state, the active/disabled state of the drop-downs next to it, etc.), and variables for each of the drop-downs so that they open up independently when clicked (if in active state).

You don’t say if you need to take the user’s choice of open/close time and apply it to the drop down values, but if you do, then I’m not sure how that could be done.


@gilgongo
Thank you for replying. I have set a lot of variables and created a component for the dropdown list. Then, I created an on/off button for the checkbox. I’ve experimented multiple times, either combining the dropdown component and checkbox component into one component or keeping them separate. However, the problem is that the dropdown does not work properly. When I merge the dropdown and checkbox into a component, it frames the whole thing. It makes sense, but the dropdown menu is covered by the frame when I preview it, and the dropdown list is not displayed when clicked.


gilgongo
  • 51 replies
  • August 4, 2023

Not sure why you’re getting the problem of the frame covering the menu. I’d probably keep the checkbox and drop downs separate, rather than working as one component with separate states, if that’s what you mean.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings