Show/hide div on dropdown change problems

Question

Sorry total js newbie here

I got this JS code from another stackoverflow question

$(document).ready(function(){
        $('#cart').on('change', function() {
          if ( this.value == '1')
          {
            $(".tea").show();
          }
          else
          {
            $(".coffee").hide();
          }
        });
    });

It worked for the other guy, but not for me, what am I possibly doing wrong?

http://codepen.io/anon/pen/waexVV

It should change the image from Coffee to tea when Tea is selected, but it only changes the image when you select tea and the coffee again

I have no idea what I did wrong, I only want to show one image and hide the other(s) when an item from the dropdown is selected

I am using bootstrap-select could there be a problem with this plugin?

Thanks a lot

Answer 1

The problem seems to be that you are not hiding the existing images, before checking which option was selected.

Try this code:

$(document).ready(function(){
        $('#cart').on('change', function() {
          $('.coffee, .tea').hide();
          switch (this.value) {
            case "1":
              $('.coffee').show();
              break;
            case "2":
              $('.tea').show();
              break;
          }
        });
    });

You should have a common class added to the images, so it's easier to hide at first.

Switch make it easier to add new products, but here you could also improve the script by adding a class with the value in the options list. Example:

$(document).ready(function(){
    $('#cart').on('change', function() {
      $('.productimages').hide(); // Same class for all product images
      $('.productImage-' + this.value).show();
    });
});

HTML:

<img class="productimages productImage-1" src="coffee.jpg" alt="coffee" />
<img class="productimages productImage-2" src="tea.jpg" alt="tea" />

Answer 2

$('.selectpicker').selectpicker();      

$(document).ready(function(){
            $('#cart').on('change', function() {
              if ( this.value == '1')
              {
                $(".tea").show();
                $(".coffee").hide();
              }
              else
              {
                $(".tea").hide();
                $(".coffee").show();
              }
            });
        });

Answer 3

Even you can operate on your class to hide element:

$(document).ready(function(){
    $('#cart').on('change', function() {
        if ( this.value == '1')
        {
             $(".tea").removeClass('hide-it');
             $(".coffee").addClass('hide-it');
        }
        else
        {
             $(".tea").addClass('hide-it');
             $(".coffee").removeClass('hide-it');
        }
    });
});

http://codepen.io/anon/pen/GJEXge

Answer 4

Change this in your script
    $(document).ready(function(){
                $('#cart').on('change', function() {
                  if ( this.value == '1')
                  {
                    $(".coffee").hide();
                    $(".tea").show();
                  }
                  else
                  {
                      $(".tea").hide();
                    $(".coffee").show();
                  }
                });
            });

Answer 5

Try it: demo

$(document).ready(function(){
            $('#cart').on('change', function() {
              if ( this.value == '1')
              {
                    $(".coffee").hide('slow');
                    $(".tea").show('slow');
              }
              else
              {
                    $(".tea").hide('slow');
                    $(".coffee").show('slow');
              }
            });
        });