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 
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. 
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! 
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.
<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.
2 Likes
I used this method for an order form and had success with running it however the email result is very chaotic. I would like to find a way to add code that would eliminate empty fields from appearing in the emails.
I have been researching the forum and haven’t seen anyone asking this about the dropdowns specifically.
@Drew_Schafer Hi Drew! I have set this up on my site but can’t get it to work, can you help? Here is the read-only link, thanks in advance!
Interesting. I don’t use Webflow’s built-in email notifications, however you might be able to control which fields appear on a per-submission level by removing those blank fields at the point of submit.
Something like;
$("#myform").submit() {
// remove blank fields
// allow submission to continue
}
However this depends on how Webflow’s email notifications are built. If it uses its array of previously-known fields ( like the submission history table does ), you’re out of luck. Also, you’d ideally want to intercept the form submission before Webflow’s default handler has a chance to fire- do your cleanup, and then fire Webflow’s handler manually. You’d need to look into that.
A better approach might be to avoid email notifications altogether and push your data into Salesforce, Pipedrive, even a free system like Trello or Slack. You’ll have far more presentation control, and no unsubscribe or sent-to-spam issues.
Or if you’re set on email notifications, build your own custom one using Mailjet.