My event listener in is not working when using chzn-select class

I tried to create a with the chzn-select class for the province dropdown.
But this class made my addEventListener not work. If I remove it, the addEventListener will work, but I need it to use this class.

My code:

(async () => {
    await loadProvinceList();

    const select = document.createElement('select');
    select.id = 'province';
    select.name = 'province';
    select.className = 'chzn-select';
    select.addEventListener('change', () => {
        console.log('test');
    });

    for (let name in provinceNameCodeMap) {
        const option = document.createElement('option');
        option.value = provinceNameCodeMap[name];
        option.textContent = name;
        select.appendChild(option);
    }

    const provinceParent = document.getElementById('province_parent');
    provinceParent.innerHTML = '';
    provinceParent.appendChild(select);
})();

I tried these but they did not work.

  • select.chosen();
  • $('#province').chosen();
  • jQuery(select).chosen();
  • $('#province').trigger("chosen:updated");
  • $('#province').trigger('liszt:updated');

I’m working on something that someone else did, so I don’t know the details of this class, so I can’t create a repeatable code. I’m sorry about that. I hope you can help me.