Pricing Blog

How to I show/hide elements based on a dropdown's selected option?

  • joseverdin._77528-1406047390573793410

    Jose Verdin

    12 days ago

    Hey crew! I'm running into a tricky puzzle I can't seem to solve: I want to show and hide elements based on a dropdown's current selected option. In the screenshot provided, I have 2 dropdown options: Contact and State. What I'm specifically trying to accomplish is when select (dropdown) element is set to option "State", hide the input field. Then when select (dropdown) element is set to option "Contact", show the input field. The input field would be hidden by default normally until "Contact" was selected. How do I achieve this in NordCraft?

    PS: Perhaps there is a better way to do it but I will have all of these different input fields shown/hidden depending on which option in the dropdown is selected. Each of these inputs would be bound to different filtering variables which would then power filtering in a data set with different columns. Is there a better way than having all of these input fields being shown and hidden based on drop down selection?
    1406047391030710394-image.png
  • whitep4nth3r-1406161477987209287

    salma

    12 days ago

    Sorry I don’t have time to make a demo right now but try this

    - Create a variable showInput, default value false

    - use the show/hide formula on the input field and show it when showInput is true

    - add a change event to the select dropdown

    - add a switch case

    - if the event.target.value is Contact, set showInput to true (assuming the value on the dropdown option in the attributes panel is exactly “Contact)

    - else set showInput to false
  • you can then add other cases to the switch for different values and use different variables to show/hide other fields
  • I don’t think there is a better option but I’m happy to be proven wrong
  • You could also ask the AI
  • Sorry I only read your PS after I read the first paragraph 😅