Ad

JQuery Show/hide Div Based On Select Option

So I know this has been asked a bunch and I've cycled through several posts and have done, it seems, exactly what has been said, but can't get it to work. You can see my page here.

Essentially I want to show a div and make its inputs/selects required (once shown; if hidden, they are not required). Obviously the div should show/hide depending on the selection.

$('#table-meals, .product-addon-please-choose-your-meal').hide();

$('#purchase').change(function(){
      if($(this).val()=="Individual") {
        $('#table-meals').show();
        $('select').prop('required',true);
      }

      if($(this).val()=="Table of 10") {
        $('.product-addon-please-choose-your-meal').show();
        $('input').prop('required',true);
      }
  });
Ad

Answer

I figured it out, instead of using $('#purchase').change(function(){ I need to use $('form').on('change', '#purchase', function(){

Ad
source: stackoverflow.com
Ad