爬取高校学生网站时Select元素设置后提交重置问题求助

嘿，我之前爬学校教务系统的时候也碰到过完全一样的坑！这种情况几乎都是因为页面给下拉框绑定了change事件，但你直接修改value或selectedIndex并没有触发这个事件，系统后台或者前端校验的时候会认为你根本没选选项，所以提交时就重置回初始值了。

给你几个亲测有效的解决方案：

1. 手动触发change事件（最常用） #

改完下拉框的值后，手动派发一个change事件，模拟用户手动选择的操作：

const selectElem = document.getElementById(selectId);
// 设置你想要的值
selectElem.value = valueIWant;
// 触发change事件，让系统感知到选项变化
selectElem.dispatchEvent(new Event('change'));

如果是老浏览器（不过现在教务系统基本支持现代语法了），可以用兼容写法：

if (selectElem.fireEvent) {
  selectElem.fireEvent('onchange');
} else {
  selectElem.dispatchEvent(new Event('change'));
}

2. 直接选中对应Option并触发事件 #

有时候直接设置value可能不生效（比如option的value和显示文本不一致），可以直接找到目标option设置选中，再触发事件：

const selectElem = document.getElementById(selectId);
// 按value查找目标option
const targetOption = selectElem.querySelector(`option[value="${valueIWant}"]`);
// 或者按文本查找：selectElem.querySelector(`option:contains("${textIWant}")`)
if (targetOption) {
  targetOption.selected = true;
  selectElem.dispatchEvent(new Event('change'));
}

3. 检查是否有隐藏字段需要同步 #

有些教务系统会把下拉框选中的值同步到一个隐藏的input字段里（比如用来存课程ID、学期ID这类后端需要的参数）。你可以打开浏览器开发者工具，看看页面里有没有和下拉框关联的隐藏input，如果有，改完下拉框后也要同步更新这个input的value：

// 假设隐藏input的id是hiddenSemesterId
document.getElementById('hiddenSemesterId').value = valueIWant;

额外小技巧 #

如果你的爬虫用了jQuery（有些老系统页面本身就引入了），可以用更简洁的写法：

$('#' + selectId).val(valueIWant).trigger('change');

如果还是不行，你可以在控制台输入getEventListeners(document.getElementById(selectId))，看看下拉框绑定了哪些事件，除了change之外，有没有click、blur之类的需要触发的，不过大部分情况触发change就够了。

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