title: How do I set a default value for my .onchange function and still keep the 'onchange' functionality?
body: <p>I have created a custom search application showing results of a user input. In the application I have included a way for the user to control the amount of results that display.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select id="countShow"&gt;
      &lt;option selected="selected"&gt;10&lt;/option&gt;
      &lt;option&gt;25&lt;/option&gt;
      &lt;option&gt;50&lt;/option&gt;
      &lt;option&gt;100&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$("select").on('change', function () {
      $('#countShow').val(10);
      var str = "";
      $("select option:selected").each(function () {
      str = $(this).text();
      str = parseInt(str) - 1;
  });
      $('div &gt; #result:gt('+str+')').remove();
      console.log(str);
  })
  </code></pre>
  
  <p>My <code>console.log</code> shows the original value as 10 when the page loads and I understand that it is waiting for the control to change. </p>
  
  <p>I have tried adding the following before the function to create a default value:</p>
  
  <pre><code>$('#countShow').val(10); //the value stays 10 and will not change on event
  $('div &gt; #result:gt(9)').remove(); //does the same as the first
  </code></pre>