Selectmenu Jquery UI change event on pageload

Question

I'm currently using JQuery UI SelectMenu Widget in my application. The options in the selectMenu are filled at runtime based on some values in sql tables.

Based on the option selected in the selectedMenu a datatable needs to be filtered on a specific column.

.Js snippet

$(document).ready(function() {
    var table = $('.tableContent').DataTable({
        "columnDefs" : [ {
            "className" : "dt-center",
            "targets" : "_all"
        } ]
    });

    $("#osFamilySelect1").selectmenu({
        change : function(event, ui) {
            dropdownSelect = ui.item.value;
            table.column(9).search(dropdownSelect, false, true, true).draw();
        }
    });
});

The above works when something is selected, but does not work when the page is first loaded i.e the table is not filtered when the page is first loaded.

How to achieve the same.

Answer 1

Resolved the problem using below:

$(function() { // Shorthand for $(document).ready(function() {
      var table = $('.tableContent').DataTable({...});
      $('#osFamilySelect1').selectmenu({...});
      table.column(9).search($('#osFamilySelect1').val(), false, true, true).draw();
});