How to start a function when selecting one of the list items? But the function must be described separately (outside the brackets)

The sample code looks like this, but .change(filter) for some reason does not work, if it is possible to make the function work, I would not want to repeat it, lengthening the code. the function itself must be triggered not only by the choice of the element of the drop-down list, but also when loading.

 $('#edit-field-sitynoth-und, #edit-field-sitynoth').change(filter); function filter() { var SVal = $('#edit-field-sitynoth-und, #edit-field-sitynoth').val(); var a = $('#edit-field-street [value=_none], #edit-field-street [value=All]'); var b = $('#edit-field-streetdud [value=_none], #edit-field-streetdud [value=All]'); var c = $('#edit-field-district1-und [value=_none], #edit-field-district1 [value=All]'); if (SVal == 862) { //a.prop('selected', 'selected'); b.prop('selected', 'selected'); $('#edit-field-streetdud, #edit-field-streetdud-wrapper').removeClass('active'); $('#edit-field-street, #edit-field-street-wrapper').addClass('active'); $('#edit-field-district1, #edit-field-district1-wrapper').addClass('active'); } else if (SVal == 861) { $('#edit-field-streetdud, #edit-field-streetdud-wrapper').addClass('active'); $('#edit-field-street, #edit-field-street-wrapper').removeClass('active'); $('#edit-field-district1, #edit-field-district1-wrapper').removeClass('active'); //b.prop('selected', 'selected'); a.prop('selected', 'selected'); c.prop('selected', 'selected'); } else if (SVal == '_none' || SVal == 'All') { $('#edit-field-streetdud, #edit-field-streetdud-wrapper').removeClass('active'); $('#edit-field-street, #edit-field-street-wrapper').removeClass('active'); $('#edit-field-district1, #edit-field-district1-wrapper').removeClass('active'); b.prop('selected', 'selected'); a.prop('selected', 'selected'); c.prop('selected', 'selected'); } }