title: Dynamically remove Characters from Textarea
body: <p>I have a textarea which will have a <strong>dynamic maxlength, depending on the Dropdown</strong>.</p>
  
  <p>I have a situation in which,<br/>
  If the User chooses to <strong>select an option with longer maxlength ie. "b"</strong> in by case,<br/>
  Then types in characters <br/>
  <strong>and later <br/>
  chooses an option with shorter maxlength, ie. "a" in my case</strong> <br/><br/>
  I need to <strong>remove the extra number of characters from the textarea, typed in when longer option from dropdown was selected</strong>.</p>
  
  <p>Here's a sample code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var maxLen;
  
  function lengthChange() {
    var id = $('#ta').attr("id");
    var dropdown = $('#choice').val();
    var taValue = $('#ta').val();
    var len = taValue.length;
    if (dropdown == "a") {
      maxLen = "5";
      $('#' + id).attr("maxlength", maxLen);
    } else {
      maxLen = "10";
      $('#' + id).attr("maxlength", maxLen);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;select id="choice" name="choice" onchange="lengthChange()"&gt;
    &lt;option value="a"&gt;a&lt;/option&gt;
    &lt;option value="b"&gt;b&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;textarea id="ta" name="ta" rows="4" cols="20" maxlength="5"&gt;
  &lt;/textarea&gt;</code></pre>
  </div>
  </div>
  </p>