show/hide a filed based on the sellection from two or more dropdowns

Question

Hi there,I hope this is the right place to ask this question and I would be grateful if someone could shed some light on it.In my form I have:Dropdown #1: Option 1Option 2Option 3Dropdown #2:Option 1Option 2Option 3If a user selects Option 1 from Dropdown #1 and Option 3 from Dropdown #2 then another field should become visible. Obviously, any other combination of the answers will hide this field.​I know how to show/hide fields based on a dropdown selection but I don’t know how I can put an “AND” between to separate selections.​Thanks in advance for any help.

healyhatman · Accepted Answer

You might have to do it with jQuery. On change for dropdown 2, select "function", and in the target field (the one on the right, so not the 'value' field) put the name of your function.

In a custom JS block, put something along the lines of

function myFunction(elem) {
   var drop1 = jQuery('select [name="dropdown1"]').dropdown('get value');
   var drop2 = jQuery('select [name="dropdown2"]').dropdown('get value');
   if(whatever your logic is) {
      jQuery('input[name="fieldname"]').removeClass("hidden"); // Will SHOW the field
   }
   else {
      jQuery('input[name="fieldname"]').addClass("hidden"); // Will HIDE the field
   }
}

If you need to do more complicated things like removing validation then you'll have to look at form validation in the Semantic UI docs.

Alternatively, you can use a Segment or Container area, and onchange for the dropdown reload the segment/container area. Inside the area you would have a Switcher Area with the necessary fields under the necessary condition blocks.

show/hide a filed based on the sellection from two or more dropdowns

How to show or hide a form field based on multiple dropdown selections.

Overview