How to show div based value from dropdown on click?
<p>I'm trying to show some different divs based on the value a user has choosen, when he/she clicks the "go-button". Here is my script:</p>

<pre><code>$(document).ready(function(){
$('#divarea1').hide();
$('#divarea2').hide();
$('#divarea3').hide();

    $('#go-button').click(function() {
     var whatToShow = $('#dropdown').val();
        if (whatToShow = ref1) {
            $('#divarea1').show();
            }
        else if (whatToShow = ref2) {
            $('#divarea2').show();
            }
        else {
            $('#divarea3').show();
            }
});
});
</code></pre>

<p>And here is my html:</p>

<pre><code>&lt;form name="ref-selector" method="POST" ACTION="URL"&gt;
    &lt;select id="dropdown" name="dropdown"&gt; 
        &lt;option value="ref1"&gt;Book&lt;/option&gt;
        &lt;option value="ref2"&gt;Journal&lt;/option&gt;
        &lt;option value="ref3"&gt;Webpage&lt;/option&gt;
    &lt;/select&gt;
    &lt;input type="button" id="go-button" value="Go"&gt;
&lt;/form&gt;


&lt;div id="divarea1"&gt;
&lt;p&gt;Some random content&lt;/p&gt;
&lt;/div&gt;

&lt;div id="divarea2"&gt;
&lt;p&gt;Some other random content&lt;/p&gt;
&lt;/div&gt;

&lt;div id="divarea3"&gt;
&lt;p&gt;The last random content&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>I hope some of you will be able to help me. I've tried to look around for solutions, but nothing seems to be what I'm looking for, and I can't get it to work from what else I have read.</p>
