如何根据下拉列表填充HTML页面中的用户名字段

时间:2019-02-08 16:18:24

标签: javascript html tampermonkey

我希望为测试人员创建一个工具,使他们的工作更加轻松。 目前,他们的Excel工作表的列名称可以理解,并映射到数字ID。

数字ID是实际的登录名,因此他们在excel文件中查找naem并将其复制到用户名字段。

几次后,这变得很乏味。

我想为Tamper Monkey创建一个JS脚本,该脚本基于显示测试人员列表的下拉菜单填充登录页面上的用户名和密码字段(由于无法编辑源,因此我使用Tamper Monkey)。易于理解的名称,并根据其选择为用户名字段填充正确的数字ID。

我尝试了以下方法:

 $('#username').attr('value', '4000021865');
 $('#password').attr('value', 'Test');

这使我登录了一个用户。

但是我无法在线找到TamperMonkey的基于下拉列表的工作示例,而且我也不知道从哪里开始。

如果有人能指出我正确的方向,将不胜感激。

2 个答案:

答案 0 :(得分:0)

我发现我可以重复使用的模板完全可以满足我的需求。

 // ==UserScript==
 // @name        facebook login
 // @namespace   http://123.123
 // @include     https://www.facebook.com/*
 // @version     1
 // @require     http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.js
 // @require     http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js
 // @resource    bt 
 http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
 // @resource    bt-theme 
 http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css
 // @grant       GM_addStyle
 // @grant       GM_getResourceText
 // ==/UserScript==
(function() {
if ($('#login_form').length <= 0) {
    console.log('No login_form');
    return;
}

GM_addStyle(GM_getResourceText("bt"));
GM_addStyle(GM_getResourceText ("bt-theme"));
GM_addStyle("#menu1 a {text-align: left}");
var $loginbutton = $('#loginbutton');
var menu = '<span class="dropdown btn btn-primary" style="padding: 2px; margin: 0 0 0 5px;">' +
           '<a id="drop4" href="#" data-toggle="dropdown" role="button" style="color: #FFF">User Selection ' +
           '<b class="caret"></b>' +
           '</a>' +
           '<ul id="menu1" class="dropdown-menu" aria-labelledby="drop4" role="menu">' +
           '<li>' +
           '<a href="#" role="menuitem">kaoyenchi</a>' +
           '</li>' +
           '<li>' +
           '<a href="#" role="menuitem">tcyc</a>' +
           '</li>' +
           '<li>' +
           '<a href="#" role="menuitem">fcwu</a>' +
           '</li>' +
           '</ul>' +
           '</span>'
$loginbutton.parent().append(menu);
var accounts = {};
accounts['fcwu'] = ['', ''];
accounts['kaoyenchi'] = ['', ''];
accounts['tcyc'] = ['', ''];
accounts['timy'] = ['', ''];
$('#menu1 a').click(function() {
    name = $(this).text()
    $('#email').attr('value', accounts[name][0]);
    $('#pass').attr('value', accounts[name][1]);
    $('#login_form').submit();
});

})();

答案 1 :(得分:0)

如果它是<select>,且有多个<options>,则可以执行相同操作。 $('#selectId').attr('value', 'optionValue');

示例:http://jsfiddle.net/g689n1d2/