通过JS修改下拉框选项值不生效，无法触发对应数据加载如何解决？

问题原因 #

直接通过JS修改<select>元素的value属性，或者设置子option的selected状态，只会修改元素的属性值，不会自动触发元素上绑定的事件。你所测试的站点分页数据加载逻辑是通过监听change事件触发的：手动选择下拉选项时，浏览器会自动派发change事件，因此可以正常加载数据；而通过JS直接修改值时不会自动触发该事件，因此无法执行后续的加载逻辑。

解决代码 #

修改下拉框值之后，手动创建并派发change事件即可触发加载：

// 选中目标下拉框元素
const selectElement = document.querySelector('.select-wrap select');
// 设置选中值为50条
selectElement.value = '50';
// 创建支持冒泡的change事件
const changeEvent = new Event('change', { bubbles: true });
// 向目标元素派发事件，触发绑定的加载逻辑
selectElement.dispatchEvent(changeEvent);

其他场景适配 #

如果遇到其他站点同样的问题，可先确认该控件绑定的触发事件类型（部分站点可能绑定input事件），将代码中的change替换为对应事件名即可生效。

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