Code not working when document.ready is added
<p>the code below works fine on jsFiddle without <code>$(document).ready(function() {</code> and the closing brackets. (ex: <a href="http://jsfiddle.net/cEDYD/" rel="nofollow">http://jsfiddle.net/cEDYD/</a> ) but soon as I put the code on my webpage with the document ready it stops works. Am I missing something? I've included jquery</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function() {
    function showDiv(element, pro2) {
        if (pro2.children("option:selected").val() == "cpl") element.show();
        else element.hide();
    }

    var myElement = $("div#pro2");
    var mypro2 = $("select#ptype");

    $("select").change(function() {
        showDiv(myElement, mypro2)
    });
});
&lt;/script&gt;
</code></pre>
