jquery form

HTML

<form id="form1_contact" class="contact-form" action="/en-us/contact" method="post">
  <div>
    <input id="form1_name" name="name" class="contact-form__input" placeholder="Full Name" type="text" required="required" />
  </div>
  <div>
    <input id="form1_email" name="email" class="contact-form__input" placeholder="Email address" type="email" required="required" />
  </div>
  <div class="split-form">
    <label for="form1_segment">Segment</label>
    <select id="form1_segment" name="segment" class="test">
      <option value="Select a Segment">Select a Segment</option>
      <option value="Food Service">Food Service</option>
      <option value="Building Care">Building Care</option>
      <option value="Industry">Industry</option>
      <option value="Health Care">Health Care</option>
      <option value="Automotive">Automotive</option>
      <option value="Aerospace">Aerospace</option>
    </select>
  </div>
  <div class="split-form last">
    <label for="form1_product">Product</label>
    <select id="form1_product" name="product" class="test product-select">
      <option value="Select a product">Select a product</option>
      <option value="S.U.D.S.® Single Use Dispensing System">S.U.D.S.® Single Use Dispensing System</option>
      <option value="Chix® SC Foodservice Towels">Chix® SC Foodservice Towels</option>
      <option value="Chix® SC Foodservice Towels">Chix® SC Foodservice Towels</option>
      <option value="Chix® Pro-Quat®">Chix® Pro-Quat®</option>
      <option value="Chix® Pro-Quat®">Chix® Pro-Quat®</option>
      <option value="Chix® Pro-Quat®">Chix® Pro-Quat®</option>
      <option value="Chix® Pro-Chlor®">Chix® Pro-Chlor®</option>
      <option value="Chix® Microfiber Light Cloths">Chix® Microfiber Light Cloths</option>
      <option value="Chix® Plus with Microban">Chix® Plus with Microban</option>
      <option value="Chix® Towels with Microban">Chix® Towels with Microban</option>
      <option value="Chix® Towels">Chix® Towels</option>
   ...

CSS

div {
  display: block;
  margin-bottom: 20px;
}

JavaScript

$(document).ready(function() {

  toggleFields(); //call this first so we start out with the correct visibility depending on the selected form values
  //this will call our toggleFields function every time the selection value of our underAge field changes
  
  $("#form1_segment").change(function() {
    toggleFields();
  });

  //this toggles the visibility of our parent permission fields depending on the current selected value of the underAge field
  function toggleFields() {
  	$('.product-select').hide().prop('disabled',true);
    if ($("#form1_segment").val() == 'Food Service') {
      $("#form1_product").show().prop('disabled',false);
    } else if ($("#form1_segment").val() == 'Building Care') {
      $("#form1_product_bc").show().prop('disabled',false);
    } else if ($("#form1_segment").val() == 'Industry') {
      $("#form1_product_in").show().prop('disabled',false);
    } else if ($("#form1_segment").val() == 'Health Care') {
      $("#form1_product_hc").show().prop('disabled',false);
    } else if ($("#form1_segment").val() == 'Automotive') {
      $("#form1_product_auto").show().prop('disabled',false);
    } else if ($("#form1_segment").val() == 'Aerospace') {
      $("#form1_product_aero").show().prop('disabled',false);
    }
  }
});