title: jquery - change div based on selection - works only on fiddle
body: <p>I'm trying to help my polish friend with his website - I think there is a kind of mess with jquery code done by previous developer (which is a totally different matter). He asked me to add one more functionality - changing div content based on select option. Here is the code:</p>
  
  <pre><code>$(document).ready(function(){
  $("#pa-kategoria_cenowa").change(function(){
      $(this).find("option:selected").each(function(){
          if($(this).attr("value")=="5"){
              $(".box").not(".5").hide();
              $(".5").show();
          }
          else if($(this).attr("value")=="10"){
              $(".box").not(".10").hide();
              $(".10").show();
          }
          else if($(this).attr("value")=="15"){
              $(".box").not(".15").hide();
              $(".15").show();
          }
          else{
              $(".box").hide();
          }
      });
  }).change();
  </code></pre>
  
  <p>});</p>
  
  <p>and the jsfiddle itself: <a href="https://jsfiddle.net/bgksk5Le/" rel="nofollow">https://jsfiddle.net/bgksk5Le/</a></p>
  
  <p>The issue is weird though - this code works on the jsfiddle, but on the website - not. This is the url: <a href="http://bookszop.com/www/produkt/hilary-mantel-bring-up-the-bodies/" rel="nofollow">http://bookszop.com/www/produkt/hilary-mantel-bring-up-the-bodies/</a></p>
  
  <p>everything is linked to the dropdown menu with a caption KATEGORIA CENOWA. Unfortunatelly - that jquery code seems not to affect any piece of the website (as you see, DIV with descriptions are visible; in fact they should be hidden at start)</p>