Как повесить обработчик на тэг select?

Question

[Joirvy]

У меня есть функция, которая добавляет option во второе поле select в зависимости от выбранного значения в первом поле.

firstSelect.addEventListener('change', function() {
    	secondSelect.options.length = 0;
    	inputField.value = '';
        if (event.target.value === 'text-field') {
        	addOption(secondSelect, 'Containing', 'containing', true);
            addOption(secondSelect, 'Exactly matching', 'exactly-matching', false);
            addOption(secondSelect, 'Begins with', 'begins-with', false);
            addOption(secondSelect, 'Ends with', 'ends-with', false);
            inputField.type = 'text';
        } else {
        	addOption(secondSelect, 'Equal', 'equal', true);
        	addOption(secondSelect, 'Greater than', 'greater-than', false);
        	addOption(secondSelect, 'Less than', 'less-than', false);
        	inputField.type = 'number';
        }
    });

eventListener реагирует на событие 'change', но этого события не происходит при загрузке страницы и второе поле остаётся пустым до момента выбора.

Как можно реализовать проверку для рендера option, сразу при загрузке скрипта?

Comments

[DanKud]

Оберните код функции в отдельную пользовательскую функцию и вызовите ее при загрузке DOM:

document.addEventListener('DOMContentLoaded', имя_функции);
.....
firstSelect.addEventListener('change', имя_функции);

[Joirvy]

DanKud, ваше решение помогло, спасибо

Answer 1

[dollar]

Безымянную функцию можно скопировать в другое место и дать ей имя.
Затем вы сможете использовать её как в событии onchange, так и в событии onload.