Using jquery to hide and show div element not working

I have a woocommerce product page - here is the link - http://icestartup.com/testsites/ujsnkfvs22/wordpress/product/2-door-wardrobe/

This is a woocommerce product page.

In that page I am trying to hide and show a div tag when I am changing the select menu called "Pick Your Laminate".

Here is the code I used - Note that "pick-your-laminate" is the id of the select tag.

<script type="text/javascript">
$(document).ready(function(){
    $("#pick-your-laminate").change(function(){
        if($(this).children("option").attr(":selected")=="Plain Laminate"){
            $(".box").not(".plain").hide();
            $(".plain").show();
        }
        if($(this).children("option").attr(":selected")=="Digital Laminate"){
            $(".box").not(".digital").hide();
            $(".digital").show();
        }
    });
});
</script>

This did not work. I mean, nothing happened at all when i changed the select menu options. So I made the code more simple and i just thought I will make an alert box display when I change the dropdown menu. Heres the new code -

<script type="text/javascript">
$(document).ready(function(){
    $("#pick-your-laminate").change(function(){
       alert( "Handler for .change() called." );
    });
});
</script>

Still NOTHING HAPPENED.

What is going on? Can you guys find the problem?

You can verify by inspecting the webpage where the code is placed, that will be too nice.

Link here