How do I set a default value for my .onchange function and still keep the 'onchange' functionality?

Question

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.

HTML

<select id="countShow">
    <option selected="selected">10</option>
    <option>25</option>
    <option>50</option>
    <option>100</option>
</select>

jQuery

$("select").on('change', function () {
    $('#countShow').val(10);
    var str = "";
    $("select option:selected").each(function () {
    str = $(this).text();
    str = parseInt(str) - 1;
});
    $('div > #result:gt('+str+')').remove();
    console.log(str);
})

My console.log shows the original value as 10 when the page loads and I understand that it is waiting for the control to change.

I have tried adding the following before the function to create a default value:

$('#countShow').val(10); //the value stays 10 and will not change on event
$('div > #result:gt(9)').remove(); //does the same as the first

Answer 1

you can call it on page load:

$(document).ready(function(){
  $("select").trigger('change');
});

trigger simulates the change event on loading the page