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
2x4
2x6
slopes
ceiling
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: https://preview.webflow.com/preview/alis-first-choice-insulation-project?utm_medium=preview_link&utm_source=designer&utm_content=alis-first-choice-insulation-project&preview=8388ca069399ccfeebb84275a77e7f58&pageId=5f4302e4b2f69f5c762a1196&itemId=5f43093e2c48527a6370de0f&mode=preview

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

I’ve used this method before. Worked great.

https://www.tutorialrepublic.com/faq/show-hide-divs-based-on-dropdown-selection-in-jquery.php

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)
image

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.
image

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
image

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

<script>    
$(function() {
      $('#batts').change(function(){
        $('.battsoptions').hide();
        $('#' + $(this).val()).show();
      });
    });
</script>

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