Tampermonkey 切换 select 下拉框

VueJS 现在越来越流行，用 vuejs 的网站也越来越多，导致我想自动挂个学时都得费点周折。

例如，课程列表会随着选择的 select 下拉框不同的年份，展示不同的数据。

要想遍历到所有年份的课程数据，实现的方法

// 获取历年切换
var years = $('select[name="plans"] option').length;
GM_log("共计" + years + "年的课程");

for (var year = 0; year < years; year++) {
	// 间隔时间去获取课程列表
	(function(x) {
		setTimeout(function() {
			GM_log('year: ' + x);
			$('select[name="plans"]')[0].value = x;
			$('select[name="plans"]')[0].dispatchEvent(new Event ("change"));

                        // next tick 获取页面刷新后的效果
                        setTimeout(function() {
                              var trs = $('table.course-table tbody tr');
			      // do something
			      // ...
                        }, 180);
			
		}, 400 * (x+1));
	})(year);
}

背后的原理

vuejs 很多自动化的展示实际上是 event 驱动的，所以需要主动触发。

之前，tampermonkey 触发 vuejs 网页中 input 控件的 v-model 双向同步 也是同样的原理。

如果 select 下拉列表的数据的 ajax 动态获取的

还需要加上一个 click 的事件，例如

$('select[name="plans"]')[0].dispatchEvent(new Event ("click"));

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式