input联动修改select值时change事件alert显示异常如何修复

代码存在两处逻辑错误，直接导致弹窗内容不符合预期：

• 执行顺序颠倒：在input输入事件的回调中，先手动派发了select的change事件，之后才修改select的value值。事件触发时select的值还停留在旧状态，弹窗读到的永远是变更前的内容。
• 取值方式错误：<select> DOM元素本身没有text属性，直接访问select.text无法获取当前选中选项的展示文本。

调整赋值和触发事件的先后顺序，同时修正选中项文本的获取逻辑即可，修复后完整JS代码如下：

const inputEle = document.getElementById('input');
const selectEle = document.getElementById('select');

inputEle.addEventListener('input', function (){
    // 第一步：先更新select的选中值
    selectEle.value = this.value;
    // 第二步：值更新完成后再触发change事件
    selectEle.dispatchEvent(new Event('change'));
})

selectEle.addEventListener('change', function (){
    // 通过选中索引获取当前option，再读取展示文本
    const selectedText = this.options[this.selectedIndex].text;
    alert(`${selectedText} was selected.`)
})

• 输入数字0时，select同步选中value为0的选项，弹窗显示floor 0 was selected.
• 输入数字1时，select同步选中value为1的选项，弹窗显示floor 1 was selected.
• 输入数字2时，select同步选中value为2的选项，弹窗显示floor 2 was selected.
  完全匹配预期效果。

内容的提问来源于stack exchange，提问作者RSD