How to show a form field ONLY if another is selected in JavaScript or jQuery?
<p>I have a form, like so:</p>

<pre><code>&lt;form action="" method="post"&gt;
   &lt;select name="pageType"&gt;
      &lt;option value="main"&gt;Main Page&lt;/option&gt;
      &lt;option value="sub"&gt;Sub Page&lt;/option&gt;
      &lt;option value="sub-sub"&gt;Sub-Sub Page&lt;/option&gt;
   &lt;/select&gt;

&lt;br /&gt;

&lt;label&gt;Choose Sub Sub Name:&lt;/label&gt; &lt;input type="text" name="sub-sub-name" /&gt;

&lt;br /&gt;

&lt;input type="submit" name="submit" value="GO!" /&gt;

&lt;/form&gt;
</code></pre>

<p>What I would like to achive is for this text field (and it's label):</p>

<pre><code>&lt;label&gt;Choose Sub Sub Name:&lt;/label&gt; &lt;input type="text" name="sub-sub-name" /&gt;
</code></pre>

<p>to <strong>only appear if the 3rd option (sub sub page) is selected</strong> from the drop down and not show up otherwise. How can this be done with either javascript or the jquery framework?</p>

<h2>EDIT</h2>

<p>by the way, it would be nice if this can be achieved without the page needing to refresh and losing previously submitted form data. I know form data can still be kept using variables that store the values even on page refresh, but I was hoping for that effect that I see on a lot of sites where the additional text area (or other form element) just appears without page refresh.</p>
