Javascript 在下拉列表中选择项目后如何运行方法

我有一个表格来注册用户，我有两个下拉列表，一个是州，另一个是城市。我希望用户可以选择一个州，然后在第二个下拉列表中填充该州的城市。我有一个API来做这件事，但我不知道如何激活metod当我选择一个状态。这是一个SPA，我正在我的“top.js”类中呈现页面

获取API的方法

estados = () => {
        let dropdown = document.getElementById('estadodrop');
        dropdown.length = 0;

        let defaultOption = document.createElement('option');
        defaultOption.text = 'Selecione seu Estado';

        dropdown.add(defaultOption);
        dropdown.selectedIndex = 0;

        const url = 'https://servicodados.ibge.gov.br/api/v1/localidades/estados/';

        fetch(url)
            .then(
                function (response) {
                    if (response.status !== 200) {
                        console.warn('Erro: ' +
                            response.status);
                        return;
                    }

                    response.json().then(function (data) {
                        let option;

                        for (let i = 0; i < data.length; i++) {
                            option = document.createElement('option');
                            option.text = data[i].nome;
                            dropdown.add(option);
                            let ufid = data[i].id;

                        }

                    });
                }
            )
    }

    cidades = (ufid) => {
        let dropdown = document.getElementById('cidadedrop');
        dropdown.length = 0;

        let defaultOption = document.createElement('option');
        defaultOption.text = 'Selecione sua Cidade';

        dropdown.add(defaultOption);
        dropdown.selectedIndex = 0;

        const url = "https://servicodados.ibge.gov.br/api/v1/localidade/estados/" + ufid + "/distritos";

        fetch(url)
            .then(
                function (response) {
                    if (response.status !== 200) {
                        console.warn('Erro: ' +
                            response.status);
                        return;
                    }

                    response.json().then(function (data) {
                        let option;

                        for (let i = 0; i < data.length; i++) {
                            option = document.createElement('option');
                            option.text = data[i].nome;
                            option.value = ufselecionada
                            dropdown.add(option);

                        }
                    });
                }
            )
            .catch(function (err) {
                console.error('Erro do fetch:', err);
            });
    }

estados=（）=>{
let dropdown=document.getElementById（'estadorop'）；
dropdown.length=0；
让defaultOption=document.createElement（'option'）；
defaultOption.text='Selecione seu Estado'；
添加（默认选项）；
dropdown.selectedIndex=0；
常量url=https://servicodados.ibge.gov.br/api/v1/localidades/estados/';
获取（url）
.那么(
功能（响应）{
如果（response.status！==200）{
console.warn（'Erro:'+
答复（现状）；
返回；
}
response.json（）.then（函数（数据）{
让选择权；
for（设i=0；i{
let dropdown=document.getElementById（'CideDrop'）；
dropdown.length=0；
让defaultOption=document.createElement（'option'）；
defaultOption.text='Selecione sua Cidade'；
添加（默认选项）；
dropdown.selectedIndex=0；
常量url=”https://servicodados.ibge.gov.br/api/v1/localidade/estados/“+ufid+”/distritos”；
获取（url）
.那么(
功能（响应）{
如果（response.status！==200）{
console.warn（'Erro:'+
答复（现状）；
返回；
}
response.json（）.then（函数（数据）{
让选择权；
for（设i=0；i

My top.js

import { Cliente } from "./Cliente.js";

export class Topo {

    constructor(){
        this.render();
    }
    render = () => { 
        let topo = document.getElementById("topo");
        topo.innerHTML = "<p id='pCadastroCliente'><a href='#'>Cadastrar Cliente</a></p>"+
        "<br> <p id='pClientes'><a href='#'>Clientes Cadastrados</a></p>";
        let p = document.createElement("p");
        topo.append(p);

        let pCadastrarCliente = document.getElementById('pCadastroCliente');

        let cliente = new Cliente();

        pCadastrarCliente.addEventListener( "click", () =>{
            cliente.renderCadastro();
            cliente.estados();
        });

        let pClientesCadastrados = document.getElementById('pClientes');

        pClientesCadastrados.addEventListener( "click", () => {
             cliente.renderListar();
        });

    }
}

从“/Cliente.js”导入{Cliente}；
出口级地形图{
构造函数（）{
这个。render（）；
}
渲染=（）=>{
让topo=document.getElementById（“topo”）；
topo.innerHTML=“
”+
“
”；
设p=document.createElement（“p”）；
拓扑追加（p）；
让pcadastrarclient=document.getElementById（'pCadastroCliente'）；
让客户=新客户（）；
pCadastrarCliente.addEventListener（“单击”，（）=>{
cliente.rendercadstro（）；
cliente.estados（）；
});
让pClientesCadastrados=document.getElementById（'pClientes'）；
pClientesCadastrados.addEventListener（“单击”，（）=>{
cliente.renderListar（）；
});
}
}

您想要监听的是下拉列表的onchange事件，而不是onclick事件

我尝试了这种方法，但得到了一条错误消息：

pcadastrarclient.addEventListener（“单击”，（）=>{cliente.renderCadastro（）；cliente.estados（）；}）；让dropCidades=document.getElementById（'estadorop'）；dropCidades.addEventListener（“onchange”，（）=>{cliente.cidades（）；}）

返回的错误：未捕获类型错误：无法读取null的属性“addEventListener”继续并调试-找出您试图在其上运行addEventListener（）的对象为null的原因。可能是因为您使用的选择器不正确。