title: jQuery - Clearing textarea on change of select
body: <p>I'm building a little text editor that allows editing of files and also allows a new file to be created. This is how my select menu is configured.</p>
  
  <pre><code>&lt;select name="reportname" id="reportname" class="form-control"&gt;
      &lt;option value="zrxqy"&gt;--Choose a Report--&lt;/option&gt;
      &lt;option value="newReport"&gt;--Create a New Report--&lt;/option&gt;
      &lt;optgroup label="General Reports"&gt;
          &lt;option name="Volumes" id="Volumes" value="volumes.php"&gt;Volumes&lt;/option&gt;
          &lt;option name="Options" id="Options" value="Options.php"&gt;Options&lt;/option&gt;
      &lt;/optgroup&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>There's a <code>&lt;textarea&gt;</code> below this that display the contents of the selected report file. <code>id="reporttxt"</code>. When the <code>select</code> is changed, I want the contents of the textarea cleared and then the new file contents put in. This works when switching between files, but if a user inputs text, it breaks the clearing.</p>
  
  <p>I've tried just this:</p>
  
  <pre><code>$("#reportname").change(function(){
      $("reporttxt").html('') //this works when switching between functions
      //function to import new text &lt;-- this works fine
  }
  </code></pre>
  
  <p>I've also tried this:</p>
  
  <pre><code>$("#reportname").change(function(){
      if($(this).val() == "newReport"){
          $("#reporttxt").val(''); //this clears user input but now nothing will display
      } else {
          $("#reporttxt").html('');
      }
      //function to import text &lt;-- does not display text after .val('') is fired
  });
  </code></pre>
  
  <p>The function import text inserts it like this:</p>
  
  <pre><code>$.ajax({
      type: "GET",
      url: "report-data.php",
      data: "file="+$(this).val(),
      datatype: "json",
      success: function( result ) {
          $("#reporttxt").append(result.body);
      }
  });
  </code></pre>
  
  <p>Any ideas why these weird things happen?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>the problem was actually the <code>.append()</code>.</p>
  
  <p>I'm not sure why but changing</p>
  
  <pre><code>$("#reporttxt").append(result.body);
  </code></pre>
  
  <p>to</p>
  
  <pre><code>$("#reporttxt").val(result.body);
  </code></pre>
  
  <p>fixed the problem. I am just using <code>$("#reporttxt").val('');</code> to clear now.</p>