如何使用 typescript 触发 select 元素到 select 第一个选项的事件？

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);
}

但这只是触发另一个变化。 我希望它触发更改为 select 国家下拉元素中的第一个选项。 如何将其写入 select 第一个选项？

Answer 1

举个例子，不知道是不是你的意思？！

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

 <input type="text">

Answer 2

过了一会儿，我在这里找到了正确的答案。 我的代码如下

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 元素，将它们设置为美国的值，并发送一个简单的更改事件。 这样，我的 states 元素的监听器就会触发和填充，为我节省了大量时间！