Tampermonkey 切换 select 下拉框

更新日期: 2018-11-25 阅读次数: 3831 分类: Tampermonkey

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"));

爱评论不评论

近期节日

2020年09月22日 世界无车日
2020年09月22日 秋分
2020年09月23日 国际聋人节
2020年09月27日 世界旅游日
2020年10月01日 国庆节
2020年10月01日 中秋节
2020年10月04日 世界动物日
2020年10月08日 寒露
2020年10月09日 世界邮政日
2020年10月10日 辛亥革命纪念日
2020年10月13日 中国少年先锋队诞辰日
2020年10月14日 世界标准日
查看更多节日