Javascript .hide and .show elements not working in google crome
<pre><code>function txtF(str) {
  if(str==true) {
    $('#textField').show();
  }
  else {
    $('#textField').hide();
  }
}

function txtFH(strb) {
  if(strb==true) {
    $('#textField').hide();
  }
}

&lt;div class="fdwrap"&gt;
  &lt;div class="label"&gt;&lt;h3&gt;Post Type : &lt;/h3&gt;&lt;/div&gt;
  &lt;select id="postType" name="postType" tabindex="6" class="selmenu"&gt;
    &lt;option value="text" id="text" &gt;Select Post Type&lt;/option&gt;
    &lt;option value="text" id="text" onclick="txtF(this.selected);" onmouseout="imgFH(this.selected)"&gt;Text&lt;/option&gt;
    &lt;option value="image" id="image" onclick="imgF(this.selected);" onmouseout="txtFH(this.selected)"&gt;Image&lt;/option&gt;
  &lt;/select&gt;
  &lt;textarea id="textField" name="textFiled" rows="3" class="textField" style="display:none; width:370px; height:100px;"&gt;&lt;/textarea&gt;
  &lt;input type="file" name="imageFiled" id="imageField" class="imageField" style="display:none" /&gt;
&lt;/div&gt;
</code></pre>
