Streaming live at 10am (PST)

Show select form based on what the user chooses

Hi everyone,
I have various select fields and what I’m trying to do is hide the select field unless the user picks a specific option.
So for example I have a select field with the class " batts" and the options are
if a customer chooses “2x4” I want the select field “2x4 options” to show and hide the other 3 select fields. I think it may need code, anyways I hope that made sense, if anyone could help me it would be greatly appreciated! Thanks in advance :slight_smile:

Here is my site Read-Only:

Yeah, not sure how to do this without custom code.

I’ve used this method before. Worked great.

Hope that helps. :+1:

I’m not really familiar with code so if you could please tell me what parts I would have to change to make it work with my select fields? I would really appreciate it, thanks! :smile:

No worries.

First give each of your choices in your first select dropdown a value that you can remember. (maybe the same as your text)

Then set the ID for each dropdown. Set the main one as something like “batts”. All the others should match the values you set in the associated choice.

Now add the same class to each of the secondary options select dropdowns that you want to show/hide, something like “battsoptions”
Set Display to None for these dropdowns

And finally add the following custom code in your page settings custom code Before tag section.

$(function() {
        $('#' + $(this).val()).show();

What this will do is everytime the batts dropdown is changed, it will hide all of the elements with the battsoption class. then it will show the element with the id that matches the option selected.

1 Like