Jquery To Hide Divs Based On Dropdown

I've gone through a lot of the posts here already on how to do this, and I've tried multiple times to implement them on my website. I'm not a developer by any means, so I'm hoping

Solution 1:

You just need a minor refactor in order to make that code works, but using the html classes from your code:

  $(document).ready(function () {
      $('.resource-duplicate , .training-duplicate').hide();
      $('#download_tag').change(function () {
         $('.resource-duplicate , .training-duplicate').hide();
         var choice = $('#download_tag option:selected').text()
         if(choice === 'Resources'){
            $('.resource-duplicate').show();
         }
         if(choice === 'Training'){
            $('.training-duplicate').show();
         }
      })
  });

You can see it working here: JSFiddle demo

Solution 2:

Try this:

$('#selectMe').on('change', function() {
  $('.group').hide();
  $('#' + $(this).val()).show();
})

What's happening here is that you're checking for when the dropdown is changed, when it's changed, you hide all of your .group elements and you show the element that matches the currently selected value.

You could split this out a bit more so that you can see what's going on better like this:

$('#selectMe').on('change', function() {
  $('.group').hide();
  var selectedValue = $(this).val();
  $('#' + selectedValue).show();
});

Hope this helps!

Solution 3:

Add this to your CSS:

.resource-duplicate{
    display: none;
}

.training-duplicate {
    display: none;
}

Then add this to your jQuery:

$(document).ready(function () {
    $('#download_tag').change(function(){
        if($(this).val() == 29){      
            $('.training-duplicate').hide();
            $('.resource-duplicate').show();
        }
        else {
            $('.resource-duplicate').hide();
            $('.training-duplicate').show();        
        }
    });
});