Как вызвать событие для элемента выбора, чтобы выбрать первый вариант с машинописным текстом?

Question

У меня есть несколько раскрывающихся элементов стран, к которым прикреплены слушатели onchange, которые изменяют список состояний в дополнительном раскрывающемся списке в зависимости от выбранной страны.

Я хочу, чтобы страна была предварительно выбрана на основе региона пользователя, но я считаю, что лучший способ сделать это - просто запустить событие onchange при загрузке и установить для него страну.

Я понял, что могу создать событие и отправить его в выпадающие списки моей страны, и это здорово:

var event; // The custom event that will be created
if (document.createEvent) {
    event = document.createEvent("HTMLEvents");
    event.initEvent('onchange');
    event.eventName = "onchange";
    element.dispatchEvent(event);
}

Но это просто вызывает изменение в другом. Я хочу, чтобы это вызвало изменение, чтобы выбрать первый вариант в раскрывающемся элементе страны. Как мне написать, чтобы выбрать первый вариант?

Answer 1

Через некоторое время я нашел правильный ответ здесь . Мой код выглядит следующим образом:

var sortBySelect: NodeListOf<HTMLSelectElement> | null = document.querySelectorAll("select.Country-List");
if (sortBySelect != null) {
    sortBySelect.forEach((select) => {
        select.value = "USA";
        select.dispatchEvent(new Event("change"));
    });
}

Я запрашиваю все элементы select, которые представляют собой раскрывающиеся списки стран, устанавливаю для них значение United States и отправляю событие простого изменения. Таким образом, мои слушатели для элемента состояний запускаются и заполняются, что экономит мне много времени!

Answer 2

Вот пример, я не знаю, что вы имеете в виду?!

var input = document.querySelector("input");
input.onchange = function() {
  console.log("changed");
}
window.onload = function() {
  input.onchange();
}

<input type="text">