How to do this in pure JavaScript?

$() is a shorthand of jQuery() which, in turn, is a function that can receive different parameters and make a decision for each of them.

At the beginning, your function is passed as a parameter. This is for the function to run only after the entire DOM has already been loaded and ready for use - see documentation .

The equivalent of this would be to use the DOMContentLoaded event of the document.

document.addEventListener('DOMContentLoaded', function() { });

You can read more about this in specific in What's the difference between $ (document) .ready () and window.onload? and also in There is some equivalent of "$ (document). ready () "with pure Javascript?

In the second case, the $() function receives a selector and returns one or more elements that "match" this selector - vide documentation . Same as CSS, #selCurso is a selector for the element that has the id equal to selCourse .

The equivalent of this is document.getElementById('selCurso') . Or, in a more "modern" way document.querySelector('#selCurso') .

The change function adds an event handler to the JavaScript event called " change ".

The equivalent of this is .addEventListener('change', callback) .

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('selCurso').addEventListener('change', function () {
        Pesquisar();
    });
});