Error- Cannot read the property 'toLowerCase' of null

Question

I generate a table with ajax and server sided.

With a select box you can filter the table. Everything is working well.

This is the select box code:

<select id="sortBy">
    <option value="">Sort by</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
</select>**strong text**

This is the jquery code:

var table = $('#example').DataTable({
    "searching": false,
    "processing": true,
    "serverSide": true,
    "ajax": {
       "url": "https://xyyy.de/getData.php",
       "data": function ( d ) {
         return $.extend( {}, d, {
           "search_keywords": $("#searchInput").val().toLowerCase(),
           "filter_option": $("#sortBy").val().toLowerCase()
         } );
       }
     }
});

$(document).ready(function(){
    // Redraw the table
    table.draw();
    
    // Redraw the table based on the custom input
     $('#searchInput,#sortBy').bind("keyup change", function(){
        table.draw();
    });
 

});

Now I want to add the size attribute to the select box like that:

<select size "5" id="sortBy">
    <option value="">Sort by</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
</select>

After this change the whole table isn´t working anymore and no data is generated inside of the table.

This is the consoles error:

Uncaught TypeError: Cannot read property 'toLowerCase' of null

If I delete the toLowerCase()out of the filter_option everything is working fine. How can I fix that and what´s the reason?